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

更新时间：2019年06月20日 10:46:07 作者：longzhoufeng

这篇文章主要介绍了JS实现的简单tab切换功能,结合完整实例形式分析了javascript基于事件响应实现页面元素属性动态变换相关操作技巧,需要的朋友可以参考下

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

20行js代码实现的贪吃蛇小游戏
曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用Java实现太难，现在网页制作20行代码就做成一个简单的demo了，下面这篇文章主要给大家介绍了利用20行js代码实现的贪吃蛇小游戏，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-06-06
js实现两个值相加alert出来精确到指定位
两个值相加精确指定位数在alert出来，下面有个不错的示例，感兴趣的朋友可以参考下
2013-09-09
JavaScript深入理解系列之call与apply
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它们的作用一模一样,区别仅在于传入参数形式的不同,下面这篇文章主要介绍了JavaScript深入理解系列之call与apply的相关资料,需要的朋友可以参考下
2022-04-04
JS二分查找算法详解
这篇文章主要为大家详细介绍了JS二分查找算法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
JS代码判断集锦大全
本文通过实例代码给大家介绍了js代码判断的方法，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2007-12-12
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
也许，三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过，物理学广泛地应用在今天许多游戏、动画中。
2010-06-06
输入框过滤非数字的js代码
这篇文章主要介绍js过滤输入框中非数字的字符，很简单，但很实用，需要的朋友可以参考下
2014-09-09
20行JS代码实现网页刮刮乐效果
下面小编就为大家带来一篇20行JS代码实现网页刮刮乐效果。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
JavaScript中定义函数的三种方法
这篇文章主要介绍了JavaScript中定义函数的三种方法,本文直接给出代码实现,同时给出了构造函数的相关知识,需要的朋友可以参考下
2015-03-03
微信小程序实现计算器小功能
这篇文章主要为大家详细介绍了微信小程序实现计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07