Index

标签页:一个选项卡效果

作者: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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项卡</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6,form{
    margin:0;
    padding:0;
    }
#indexColumn{
    padding-bottom:2px;
    margin-bottom:0;
    border:#739FCB 1px solid;
    width:500px;
    }
.centerColumnContent{
    clear:both;
    }
    
/***选项卡*/
.columnBar{
    /*兼容IE和Firefox*/
    width:500px!important;
    width:498px;
    padding-left:1px!important;
    padding:0 0 0 3px;
    margin:0 0 8px 0;
    list-style:none;
    float:left;
    background:url(http://www.is21.cn/attachments/month_0811/42008112232942.gif) repeat-x #FFF;
    line-height:25px;
    border-bottom:1px solid #739FCB;
    }
.columnBar li{
    padding:0 16px 0 15px;
    float:left;
    cursor:pointer;
    background:url(http://www.is21.cn/attachments/month_0811/f2008112233130.gif) no-repeat right center;
    }
.columnBar li h3{
    color:#005295;
    font-size:14px;
    font-weight:normal;
    }
/****选项卡高亮状态*/
.columnBarOver{
    position:relative;
    margin:-1px 0 -1px -2px;
    padding:2px 14px 0 15px!important;
    line-height:24px;
    border-style:solid;
    border-width:1px 1px 0 1px;
    border-color:#5589BE #739FCB #739FCB #739FCB;
    background:url(http://www.is21.cn/attachments/month_0811/x2008112233257.gif) repeat-x #FFF!important;
    }
.columnBarOver h3{
    color:#F60!important;
    font-weight:bold!important;
    }
/***中间内容*/    
.centerColumnContent{
    clear:both;
    }
.cloumnDisplayText{
    color:#333;
    padding:5px 0 10px;
    margin-bottom:3px!important;
    margin:0 10px 4px;
    font-size:14px;
    line-height:180%;
    background:#FAFAFA;
    border-bottom:1px dashed #CCC;
    }
-->
</style>
</head>
<script type="text/javascript">
<!--
//通用选项卡样式内容变换
function selCat(name,obj,n)
{
    for(i=1;i<=n;i++)
    {
        eval("document.getElementById('"+name+i+"').className=''");
        //隐藏变换选项卡内容
        if(name == 'n' || name == 's'){}
        else{
            eval("document.getElementById('display_"+name+'_'+i+"').style.display='none'");
        }
    }
    //排行模块
    if(name == 'mt' || name == 'dt'){
        eval("document.getElementById('"+name+obj+"').className='topButtonOver'");
    }
    //所有中间选项卡模块
    else{
        eval("document.getElementById('"+name+obj+"').className='columnBarOver'");
    }
    //显示变换选项卡内容
    if(name == 'n' || name == 's'){}
    else{
        eval("document.getElementById('display_"+name+'_'+obj+"').style.display=''");
    }
}
function DLLRegistered(strID)
{
        var o = null;
      try {
            o = new ActiveXObject(strID);
        }catch(e){
            return false;
      }
        if(o != null){
            o = null;
            return true;
        }else
            return false;
}
-->
</script>
<body >
<div id="indexColumn">
        <ul class="columnBar">
            <li id="index1" onClick="selCat('index',1,5);">
              <h3>栏目一</h3>
            </li>
            <li id="index2" onClick="selCat('index',2,5);">
              <h3>栏目二</h3>
            </li>
            <li id="index3" onClick="selCat('index',3,5);" class="columnBarOver">
              <h3>栏目三</h3>
            </li>
            <li id="index4" onClick="selCat('index',4,5);">
              <h3>栏目四</h3>
            </li>
            <li id="index5" onClick="selCat('index',5,5);">
              <h3>栏目五</h3>
            </li>
        </ul>
        <div id="indexContent" class="centerColumnContent">
            
            <!--栏目一-->
            <div id="display_index_1" style="display:none">
                栏目一
            </div>
            
            <!--栏目二-->
            <div id="display_index_2" style="display:none">
                栏目二
            </div>
            
            <!--栏目三-->
            <div id="display_index_3">
                栏目三
            </div>
            
            <!--栏目四-->
            <div id="display_index_4" style="display:none">
                栏目四
            </div>
            
            <!--栏目五-->
            <div id="display_index_5" style="display:none">
                
                <!--栏目五-->
                栏目五
            </div>
        </div>
</div></body>
</html>


[本日志由 admin 于 2008-11-02 11:34 PM 编辑]
文章来自: 本站原创
引用通告地址: http://www.is21.cn/trackback.asp?tbID=486
Tags:
评论: 0 | 引用: 0 | 查看次数: 1852
发表评论
你没有权限发表留言！