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

网络编程 2025/11/6 佚名

3 2 1

本文实例讲述了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>

运行结果：

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

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

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

JS,tab切换

标签：

JS,tab切换

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JS实现的简单tab切换功能完整示例”

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

暂无“JS实现的简单tab切换功能完整示例”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2025年11月06日

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

JS,tab切换

javascript实现5秒倒计时并跳转功能

Vue 页面权限控制和登陆验证功能的实例代码

评论“JS实现的简单tab切换功能完整示例”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接