Home > Article > Web Front-end > Sample code for implementing Tab switching effect using JS

Sample code for implementing Tab switching effect using JS

黄舟Original: 2017-10-21 09:58:392373browse

html part

<!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 part

*{
 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 part

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";
  }
 }

}

The above is the detailed content of Sample code for implementing Tab switching effect using JS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript+html5 canvas implements sample code for drawing hyperlinks on imagesNext article：JavaScript+html5 canvas implements sample code for drawing hyperlinks on images

See more

Sample code for implementing Tab switching effect using JS

Related articles