滑动门（舌签）代码

分类：javascript 人气：1503 评论：1 时间：2011-03-16 11:35

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>滑动门（舌签）完美版 - 易看网络</title>
    <style type="text/css">
      body{
        color: #000;
        font-family: "宋体", arial;
        font-size: 12px;
        background: #fff;
        text-align: center;
        margin: 0;
      }
      .nTab{
        float: left;
        width: 960px;
        margin: 0 auto;
        border-bottom:1px #AACCEE solid;
        background:#d5d5d5;
        background-position:left;
        background-repeat:repeat-y;
        margin-bottom:2px;
      }
      .nTab .TabTitle{
        clear: both;
        height: 22px;
        overflow: hidden;
      }
      .nTab .TabTitle ul{
        border:0;
        margin:0;
        padding:0;
      }
      .nTab .TabTitle li{
        float: left;
        width: 70px;
        cursor: pointer;
        padding-top: 4px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 2px;
        list-style-type: none;
      }
      .nTab .TabTitle .active{
        background:#fff;
        border-left:1px #AACCEE solid;
        border-top:1px #AACCEE solid;
        border-right:1px #AACCEE solid;
        border-bottom:1px #fff solid;
      }
      .nTab .TabTitle .normal{
        background:#EBF3FB;
        border:1px #AACCEE solid;
      }
      .nTab .TabContent{
        width:auto;background:#fff;
        margin: 0px auto;
        padding:10px 0 0 0;
        border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
      }
      .none {display:none;}
    </style>
    <script type="text/javascript">
      function nTabs(thisObj,Num){
        if(thisObj.className == "active")return;
        var tabObj = thisObj.parentNode.id;
        var tabList = document.getElementById(tabObj).getElementsByTagName("li");
        for(i=0; i <tabList.length; i++){
          if (i == Num){
            thisObj.className = "active";
            document.getElementById(tabObj+"_Content"+i).style.display = "block";
          }else{
            tabList[i].className = "normal";
            document.getElementById(tabObj+"_Content"+i).style.display = "none";
          }
        }
      }
    </script>
</head>
<body>
    <div align="center" style="padding-left:25px;">
    
      <div class="nTab">
      
        <div class="TabTitle">
          <ul id="myTab0">
            <li class="active" onmouseover="nTabs(this,0);">易看首页</li>
            <li class="normal" onmouseover="nTabs(this,1);">易看阅读</li>
            <li class="normal" onmouseover="nTabs(this,2);">易看鉴赏</li>
            <li class="normal" onmouseover="nTabs(this,3);">易看商城</li>
            <li class="normal" onmouseover="nTabs(this,4);">易看下载</li>
            <li class="normal" onmouseover="nTabs(this,5);">易看问答</li>
          </ul>
        </div>
        
        <div class="TabContent">
          <div id="myTab0_Content0"> <a href="http://www.eslook.com" target="_blank">欢迎光临易看网络 </a></div>
          <div id="myTab0_Content1" class="none">易看阅读，网页教程，程序修改</div>
          <div id="myTab0_Content2" class="none">站在巨人的肩膀之上可以使我们看得更远</div>
          <div id="myTab0_Content3" class="none">您可以购买本站商器来支持易看</div>
          <div id="myTab0_Content4" class="none">工欲其善，必先利其器</div>
          <div id="myTab0_Content5" class="none">有啥问题，敬请提问</div>
        </div>
      </div>
      
      
      <div class="nTab" style=width:288px>
      
        <div class="TabTitle">
          <ul id="myTab1">
            <li class="active" onclick="nTabs(this,0);">易看首页</li>
            <li class="normal" onclick="nTabs(this,1);">易看阅读</li>
            <li class="normal" onclick="nTabs(this,2);">易看鉴赏</li>
            <li class="normal" onclick="nTabs(this,3);">易看下载</li>
          </ul>
        </div>
        
        <div class="TabContent">
          <div id="myTab1_Content0"> 欢迎光临易看网络</div>
          <div id="myTab1_Content1" class="none"> 易看阅读，网页教程，程序修改 </div>
          <div id="myTab1_Content2" class="none"> 站在巨人的肩膀之上可以使我们看得更远 </div>
          <div id="myTab1_Content3" class="none"> 工欲其善，必先利其器 </div>
        </div>
      </div>
      
    </div>
</body>
</html>

标签(Tag)：滑动门舌签