Heim > Artikel > Web-Frontend > Beispielcode zum Implementieren des Tab-Wechseleffekts mit JS

Beispielcode zum Implementieren des Tab-Wechseleffekts mit JS

黄舟Original: 2017-10-21 09:58:392371Durchsuche

HTML-Teil

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

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

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

}

Das obige ist der detaillierte Inhalt vonBeispielcode zum Implementieren des Tab-Wechseleffekts mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript+HTML5-Canvas implementiert Beispielcode zum Zeichnen von Hyperlinks auf BildernNächster Artikel：JavaScript+HTML5-Canvas implementiert Beispielcode zum Zeichnen von Hyperlinks auf Bildern

In Verbindung stehende Artikel

Mehr sehen