标签页:动网tab选项卡

作者:admin 日期:2008-11-02

字体大小: 小中大

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xml:lang="zh-CN" lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

    <style type="text/css">
* { word-break:break-all;word-wrap:break-word;}
body {font-size : 12px; }
.forumtop{  height:5px; border:1px solid #7AADC8; border-bottom:none; background-image:url(foruntop_bg.gif); }
#tabtitle { clear: both; }
#tabtitle p { float: left; line-height: 26px;margin:0; }
/* 未点击样式标题 */
#tabtitle p.tab_search_on { background-image:url(tab_tit_bg.gif);  width: 80px; height:26px; line-height:26px; cursor: pointer; text-align:center; color:#333333; }
/* 点击样式标题 */
#tabtitle p.tab_search {background-image:url(side_nav_on.gif); background-repeat:no-repeat;  width: 80px; height:26px; line-height:26px; text-align:center; cursor: pointer; font-weight:bold; color:#333333;}
#tabtitle #tabgroup_bot,#tabtitle #savvy_bot,#tabtitle #topic_bot { background-image:url(tab_tit_bg.gif); height:26px; margin-top:0px !important; margin-top:-10px;}
.forumbox #bot_link,#tabtitle #bot_link{ background-image:url(bg1.gif) ; height:35px; line-height:35px; border-bottom:1px solid #C2D3DC; }
.forumbox #bot_link h2{ padding:12px 15px 2px 0px;}
.forumbox #bot_link h1{ height:20px; float:left; padding-top:0px !important; padding-top:8px; }
.forumbox #bot_link h3{ height:20px; float:left; padding-top:0px !important; padding-top:9px;}
.forumbox #tabgroupbody, #tabtitle #tabgroupbody,#tabtitle #topicbody,#tabtitle #savvybody { clear:both; padding-top: 5px; text-align: left; border:1px solid #7AADC8;border-top:none; background: url(side_bg.gif) top repeat-x #f3fbfe; }
#tabtitle #search_bot {background-image:url(tab_tit_bg.gif); height:26px; margin-top:0px !important; margin-top:-10px; }
#tabtitle #searchbody{ clear:both; background:url(side_bg.gif) top repeat-x; line-height: 24px; padding: 10px 0px; text-align: center; border:1px solid #7AADC8; border-top:0px; }
#tabtitle .dis,.forumbox .dis { display: block; }
#tabtitle .undis, .forumbox .undis { display: none; }
.tabgroup {  background-image:url(side_nav_on.gif); background-repeat:no-repeat;   font-weight:bold; }
.tabgroup,.tabgroup_on{ width:80px; text-align:center;height:26px; cursor: pointer;  color:#333333;}

</style>
<script type="text/javascript">
    //新闻模式分类显示菜单
function NewsSpanBar(){
    this.f=1;
    this.event = "click"
    this.titleid = "";
    this.bodyid="";
    this.class_dis = "dis";
    this.class_undis = "undis";
    this.class_hiton = "tab_search_on";
    this.class_hitno = "tab_search";
    var Tags,TagsCnt,len,flag;
    var BClassName;
    this.load=function(){
        if (!document.getElementById(this.titleid)||!document.getElementById(this.bodyid))
        {
            return false;
        }
        flag = this.f;
        BClassName = [this.class_dis,this.class_undis,this.class_hiton,this.class_hitno];
        Tags=document.getElementById(this.titleid).getElementsByTagName('p');
        TagsCnt=document.getElementById(this.bodyid).getElementsByTagName('span');
        len=Tags.length;
        for(var i=0;i<len;i++){
            Tags[i].value = i;
            if (this.event!='click'){
                Tags[i].onmouseover=function(){changeNav(this.value)};
            }else{
                Tags[i].onclick=function(){changeNav(this.value)};
            }
            TagsCnt[i].className=BClassName[1];
        }
        Tags[flag].className=BClassName[3];
        TagsCnt[flag].className=BClassName[0];
    }
    function changeNav(v){
        Tags[flag].className=BClassName[2];
        TagsCnt[flag].className=BClassName[1];
        flag=v;
        Tags[v].className=BClassName[3];
        TagsCnt[v].className=BClassName[0];
    }
}
    </script>
    </head>
    <body>


        <div id="tabtitle">
        <div class="forumtop"></div>
        <div id="search_bot">
            <p class="tab_search_on">标题</p>
            <p class="tab_search_on">作者</p>
            <p class="tab_search_on">内容</p>
            <div style="clear:both;"></div>
        </div>
        <div id="searchbody">
        <span>
        1
        </span>
        <span>
        2
        </span>
        <span>
        3
        </span>
        </div>
        </div>


        <br/><br/>

        <div id="tabtitle">
        <div class="forumtop"></div>
        <div id="topic_bot">
            <p class="tabgroup_on">推荐帖子</p>
            <p class="tabgroup_on">热门帖子</p>
            <p class="tabgroup_on">最新帖子</p>
            <div style="clear:both;"></div>
        </div>
        <div id="topicbody">
            <span>
            1
            </span>
            <span>
            2
            </span>
            <span>
            3
            </span>
        </div>
        </div>







<script>
//右边帖子列表切换
var new3 = new NewsSpanBar();
new3.f=0;
new3.titleid = "topic_bot";
new3.bodyid = "topicbody";
new3.class_hiton = "tabgroup_on";
new3.class_hitno = "tabgroup";
new3.load();

//右边搜索切换
var new2 = new NewsSpanBar();
new2.f=0;
new2.event = "move"
new2.titleid = "search_bot";
new2.bodyid = "searchbody";
new2.class_hiton = "tab_search_on";
new2.class_hitno = "tab_search";
new2.load();

</script>

</body>
</html>

'引用自http://www.52515.net:8088/file.asp?fileid=323030332672713d323030372d31312d313326626f61726469643d3632

[本日志由 admin 于 2008-11-02 11:26 PM 编辑]