jsでよく使われるタブ切り替え効果-jsチュートリアル-php.cn

jsでよく使われるタブ切り替え効果

高洛峰

リリース： 2017-02-08 16:30:05

オリジナル

1233 人が閲覧しました

以下のエディターは、jsでよく使われるタブ切り替え効果に関する記事をお届けします（推奨）。編集者はこれがとても良いと思ったので、参考として共有します。エディターと一緒に見てみましょう。以下に示すように、皆さんのゲームが幸せになることを祈っています

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    .box{
      width: 1000px;
      overflow: hidden;
      margin:100px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
      overflow: hidden;
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      overflow: hidden;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li p{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li p a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
      #content li p span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: rgb(10,167,112);
      color: white;
    }
    #content .show{
      display: block;
    }
  </style>
</head>
<body>
    <p class="box">
      <p id="title">
        <span class="select">帅哥</span>
        <span>美女</span>
        <span>宠物</span>
        <span>影视</span>
        <span>英雄联盟</span>
        <span>音乐</span>
      </p>
      <ul id="content">
        <li class="show">
          <p><img src="images/shuaige1.jpg" alt="帅哥1"><a href="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></p>
          <p><img src="images/shuaige2.jpg" alt="帅哥2"><a href="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></p>
          <p><img src="images/shuaige3.jpg" alt="帅哥3"><a href="#">汤姆·克鲁斯</a><span>高端大气上档次</span></p>
          <p><img src="images/shuaige4.jpg" alt="帅哥4"><a href="#">汤姆·克鲁斯</a><span>高端大气上档次</span></p>
          <p><img src="images/shuaige5.jpg" alt="帅哥5"><a href="#">卷福</a><span>低调奢华有内涵</span></p>
          <p><img src="images/shuaige6.jpg" alt="帅哥6"><a href="#">卷福</a><span>低调奢华有内涵</span></p>
        </li>
        <li>
          <p><img src="images/meinv1.jpg" alt="美女1"><a href="#">美女</a><span>外猛内柔女汉子</span></p>
          <p><img src="images/meinv2.jpg" alt="美女2"><a href="#">美女</a><span>外猛内柔女汉子</span></p>
          <p><img src="images/meinv3.jpg" alt="美女3"><a href="#">美女</a><span>卖萌嘟嘴剪刀手</span></p>
          <p><img src="images/meinv4.jpg" alt="美女4"><a href="#">美女</a><span>卖萌嘟嘴剪刀手</span></p>
          <p><img src="images/meinv5.jpg" alt="美女5"><a href="#">美女</a><span>时尚亮丽小清新</span></p>
          <p><img src="images/meinv6.jpg" alt="美女6"><a href="#">美女</a><span>时尚亮丽小清新</span></p>
        </li>
        <li>
          <p><img src="images/chongwu1.jpg" alt="宠物1"><a href="#">宠物</a><span>每只666块</span></p>
          <p><img src="images/chongwu2.jpeg" alt="宠物2"><a href="#">宠物</a><span>每只666块</span></p>
          <p><img src="images/chongwu3.jpg" alt="宠物3"><a href="#">宠物</a><span>每只666块</span></p>
          <p><img src="images/chongwu4.jpg" alt="宠物4"><a href="#">宠物</a><span>每只666块</span></p>
          <p><img src="images/chongwu5.jpg" alt="宠物5"><a href="#">宠物</a><span>每只666块</span></p>
          <p><img src="images/chongwu6.jpg" alt="宠物6"><a href="#">宠物</a><span>每只666块</span></p>
        </li>
        <li>
          <p><img src="images/yingshi1.jpg" alt="影视1"><a href="#">哈利波特系列</a><span>经典中的经典</span></p>
          <p><img src="images/yingshi2.jpg" alt="影视2"><a href="#">三傻大闹宝莱坞</a><span>看到泪崩</span></p>
          <p><img src="images/yingshi3.jpg" alt="影视3"><a href="#">变形金刚系列</a><span>过瘾过瘾过瘾</span></p>
          <p><img src="images/yingshi4.jpg" alt="影视4"><a href="#">千与千寻</a><span>梦中的小萝莉那么清新</span></p>
          <p><img src="images/yingshi5.jpeg" alt="影视5"><a href="#">龙猫</a><span>我的龙猫啊啊啊</span></p>
          <p><img src="images/yingshi6.jpg" alt="影视6"><a href="#">阿甘正传</a><span>阿甘还是那个阿甘</span></p>
        </li>
        <li>
          <p><img src="images/lol1.jpg" alt="lol1"><a href="#">寒冰射手</a><span>蛮王他媳妇</span></p>
          <p><img src="images/lol2.jpg" alt="lol2"><a href="#">黑暗之女</a><span>小萝莉一枚</span></p>
          <p><img src="images/lol3.jpg" alt="lol3"><a href="#">探险家</a><span>游戏中我最帅</span></p>
          <p><img src="images/lol4.jpg" alt="lol4"><a href="#">人马</a><span>上单大野全能</span></p>
          <p><img src="images/lol5.jpg" alt="lol5"><a href="#">提莫提百万</a><span>每天死亡百万次。。</span></p>
          <p><img src="images/lol6.jpg" alt="lol6"><a href="#">狼人</a><span>别给我放大</span></p>
        </li>
        <li>
          待开发。。。
        </li>
      </ul>
    </p>
    <script>
      var title=document.getElementById(&#39;title&#39;);
      var content=document.getElementById(&#39;content&#39;);
      var spans=title.getElementsByTagName(&#39;span&#39;);
      var lis=content.getElementsByTagName(&#39;li&#39;);
      for (var i = 0; i < spans.length; i++) {
        spans[i].index=i;
          spans[i].onclick=function(){
            for (var j = 0; j < spans.length; j++) {
              spans[j].className=&#39;&#39;;
              lis[j].className=&#39;&#39;;
            }
              this.className=&#39;select&#39;;
              lis[this.index].className=&#39;show&#39;;
          }
      }
    </script>
</body>
</html>

ログイン後にコピー

このコードのキーは、トラバーサルの最後の 2 つと、最初のこのポインターです。トラバーサルの 1 つ目は、各スパンボタンにクリックイベントを追加することであり、トラバーサルの 2 つ目は、現在どのボタンがクリックされているかを判断することです。これにより、対応するコンテンツパーツの表示と非表示を簡単に制御できます。

jsでよく使われる上記のタブ切り替え効果（推奨）はすべてエディターが共有した内容ですので、ご参考になれば幸いです。また、PHP中国語ウェブサイトをサポートしていただければ幸いです。

js で一般的に使用されるタブ切り替え効果に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。