返回首页 | 申博娱乐APP下载

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

JS完成Tab选项卡切换作用的示例代码

时间:2017-10-24 编辑:admin

html部分


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="tab.css">
  <script src="tab.js"></script>
  <title>Document</title>
</head>
<body>
  <p id="tab">
    <p id="tab-nav" class="tab-nav">
      <ul>
        <li class="active"><a href="#">布告</a></li>
        <li><a href="#">规矩</a></li>
        <li><a href="#">论坛</a></li>
        <li><a href="#">安全</a></li>
        <li><a href="#">公益</a></li>
      </ul>
    </p>
    <p id="tab-contain">
      <p class="mod">
        <ul>
          <li><a href="#">走进无声讲堂</a></li>
          <li><a href="#">淘宝之行群众评定</a></li>
          <li><a href="#">爱心品牌联合搜集</a></li>
          <li><a href="#">公益组织淘宝攻略</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="#">[聚集]金牌卖家再启航</a></li>
          <li><a href="#">[功用]橱柜规矩晋级啦</a></li>
          <li><a href="#">[论题]又爱又恨优惠券</a></li>
          <li><a href="#">[东西] 购后送店肆红包</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="#">张勇:要玩高兴足球</a></li>
          <li><a href="">阿里2000万驰援灾区</a></li>
          <li><a href="">旅行宝让你边玩</a></li>
          <li><a href="">多行跟进阿里信用贷款</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="">[告诉] “众多换新”</a></li>
          <li><a href="">[告诉]“比特币严管”</a></li>
          <li><a href="">[告诉]“禁发产品”</a></li>
          <li><a href="">[告诉]“产品特点”</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="#">走进无声讲堂</a></li>
          <li><a href="#">淘宝之行群众评定</a></li>
          <li><a href="#">爱心品牌联合搜集</a></li>
          <li><a href="#">公益组织淘宝攻略</a></li>
        </ul>
      </p>
    </p>
  </p>
</body>
</html>

css部分


*{
 padding:0px;
 margin:0px;
 list-style: none;
 font-size: 14px;
}
#tab{
 width:298px;
 height:120px;
 margin:10px;
 border:1px solid #eee;
 overflow: hidden;
}
.tab-nav{
 width:400px;
 position:relative;
 height:27px;

}
.tab-nav ul{
 position:absolute;
 width:301px;
 left:-1px;
 background-color: #f7f7f7;
}
.tab-nav li{
 float:left;
 width:58px;
 padding: 0 1px;
 height:36px;
 background-color: #f7f7f7;
 border-bottom: 1px solid #eee;
 text-align: center;
}
.tab-nav li.active{
 background-color: #fff;
 border-bottom-color:#fff;
 border-left: 1px solid #eee;
 border-right: 1px solid #eee;
 padding:0px;
 font-weight: bolder;
}
li a:link,li a:visited{
 text-decoration: none;
 color:#000;
}
#tab-contain .mod{
 margin:25px 6px 10px 6px;
}
#tab-contain .mod ul li{
 float: left;
 width:143px;
 height:25px;
 overflow: hidden;
}

Js部分


function $(id){
 return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
 var navs=$('tab-nav').getElementsByTagName('li');
 var ps=$('tab-contain').getElementsByTagName('p');
 // alert(ps.length);
 if(navs.length!=ps.length){
  return;
 }
 for(var i=0;i<navs.length;i++){
  navs[i].title=i;
  navs[i].onmouseover=function(){
   for(var j=0;j<navs.length;j++){
    navs[j].className="";
    ps[j].style.display="none";

   }
   this.className="active";
   ps[this.title].style.display="block";
  }
 }

}

以上就是JS完成Tab选项卡切换作用的示例代码的具体内容,更多请重视其它相关文章!


浏览:

网站建设

流程

    网站建设流程