JS实现的简单tab切换功能完整示例

怼烎@ 2021-11-02 17:12 301阅读 0赞

本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>www.jb51.net tab切换</title>
      <style>
        * {
          padding: 0;
          margin: 0
        }
        body {
          font-size: 12px
        }
        ul, li, ol {
          list-style: none
        }
        a {
          text-decoration: none
        }
        .clearfix {
          clear: both;
          overflow: hidden
        }
        .tab_title ul li {
          float: left;
          padding: 0 10px
        }
      </style>
    </head>
    <body>
    <div id="Tab1" class="tab clearfix">
      <div class="tab_title clearfix">
        <ul>
          <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li>
          <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li>
          <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',3,3)" id="one3">TAB3</a></li>
        </ul>
      </div>
      <div class="tab_details clearfix">
        <div id="con_one_1" style="display: block;">con_one_1</div>
        <div style="display: none;" id="con_one_2">con_one_2</div>
        <div style="display: none;" id="con_one_3">con_one_3</div>
      </div>
    </div>
    <script type="text/javascript">
      //tab切换效果
      function setTab(name, cursel, n) {
        for(var i = 1; i <= n; i++) {
          var menu = document.getElementById(name + i);
          var con = document.getElementById("con_" + name + "_" + i);
          menu.className = i == cursel ? "cur" : "";
          con.style.display = i == cursel ? "block" : "none";
        }
      }
    </script>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][20190814160329196.gif]  
![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[20190814160329196.gif]: /images/20211101/dfb16c738a8748188392c5733c1d12b7.png
[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211101/fcafbfa9bca14c289c14e99b29d6f944.png