Rumah > Artikel > hujung hadapan web > JS实现Tab选项卡切换效果的示例代码

JS实现Tab选项卡切换效果的示例代码

黄舟asal: 2017-10-21 09:58:392429semak imbas

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===&#39;string&#39;?document.getElementById(id):id;
}
window.onload=function(){
 var navs=$(&#39;tab-nav&#39;).getElementsByTagName(&#39;li&#39;);
 var ps=$(&#39;tab-contain&#39;).getElementsByTagName(&#39;p&#39;);
 // 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";
  }
 }

}

Atas ialah kandungan terperinci JS实现Tab选项卡切换效果的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript+html5 canvas实现图片上画超链接的示例代码Artikel seterusnya：JavaScript是OOP语言吗？

Artikel berkaitan

Lihat lagi