JS实现的简单tab切换功能完整示例-偶像资源网

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

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title>www.freexyz.cn 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>

运行结果：

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

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.freexyz.cn/code/HtmlJsRun，测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论