zoukankan      html  css  js  c++  java
  • 又一款兼容性好的TAB标签选项卡(CSS+JS)

    代码简介:

    兼容IE7、IE8、FF等主流浏览器的多标签选项卡,基于CSS+JS技术实现,简洁漂亮,千万不要错过,本选项卡是大网站扒下的,而且好多网站都有用过,绝对值得收藏的一款点触式滑动门。

    代码内容:

    <!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>又一款兼容性好的TAB标签选项卡(CSS+JS)_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    body{
    font-family: arial;
    font-size: 12px;
    text-align: center;
    margin: 0;
    }
    .nTab{
    float: left;
     542px;
    margin: 0 auto;
    border-bottom:1px #C7C7CD solid;
    background:#d5d5d5;
    background-position:left;
    background-repeat:repeat-y;
    margin-bottom:2px;
    }
    .nTab .TabTitle{
    clear: both;
    height: 26px;
    overflow: hidden;
    }
    .nTab .TabTitle ul{
    margin:0;
    padding:0;
    }
    .nTab .TabTitle li{
    float: left;
     60px;
    cursor: pointer;
    padding-top: 6px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 7px;
    list-style-type: none;
    }
    .nTab .TabTitle .active{ background:url(http://www.webdm.cn/images/20090915/tab_bg1.gif) left -25px no-repeat;border-left:1px  #C7C7CD 
    
    solid;border-top:1px  #C7C7CD solid;border-bottom:1px #fff solid;}
    .nTab .TabTitle .normal{ background:url(http://www.webdm.cn/images/20090915/tab_bg1.gif);border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD 
    
    solid;}
    .nTab .TabContent{
    auto;background:#fff;
    margin: 0px auto;
    padding:10px 0 0 0;
    border-right:1px #C7C7CD solid;border-left:1px #C7C7CD 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>
    <br />
    <br />
    <center>
    <div style="text-align:center; margin-left:200px;">
    <!-- 选项卡开始 -->
      <div class="nTab">
        <!-- 标题开始 -->
        <div class="TabTitle">
          <ul id="myTab0">
            <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>
            <li class="normal" onclick="nTabs(this,4);">网页特效</li>
            <li class="normal" onclick="nTabs(this,5);">ASP源码</li>
    <li class="normal" onclick="nTabs(this,6);">PHP源码</li>
    <li class="normal" onclick="nTabs(this,7);">JSP源码</li>
    <li class="normal" onclick="nTabs(this,8);">JAVA源码</li>
          </ul>
        </div>
        <!-- 内容开始 -->
        <div class="TabContent">
          <div id="myTab0_Content0"> 出自:<a href="http://www.webdm.cn" target="_blank">网页代码站</a></div>
          <div id="myTab0_Content1" class="none"><a href="/">最新更新</a></div>
          <div id="myTab0_Content2" class="none"><a href="/">下载排行</a></div>
          <div id="myTab0_Content3" class="none"><a href="/">代码分类</a></div>
          <div id="myTab0_Content4" class="none"><a href="http://www.webdm.cn">网页特效</a></div>
          <div id="myTab0_Content5" class="none"><a href="/">ASP类精品程序</a></div>
    <div id="myTab0_Content6" class="none"><a href="http://www.webdm.cn">PHP精品程序</a></div>
    <div id="myTab0_Content7" class="none"><a href="/">JSP源码区</a></div>
    <div id="myTab0_Content8" class="none"><a href="http://www.webdm.cn">/提供精品JAVA源码</a></div>
        </div>
      </div>
      <!-- 选项卡结束 -->
      </div>
      </center>
     </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/a602b0de-e78c-4937-bd83-731b8bfd5980.html

  • 相关阅读:
    算法--判断数组中是否有重复值
    算法--小范围排序
    Spark性能调优之JVM调优
    算法-java代码实现基数排序
    算法-java代码实现计数排序
    算法-java代码实现希尔排序
    算法-java代码实现堆排序
    Kafka集群的搭建
    深度学习必备包
    Keras 学习之旅(一)
  • 原文地址:https://www.cnblogs.com/webdm/p/1958408.html
Copyright © 2011-2022 走看看