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使用setInterval计时器实现挑战10秒

    JS使用setInterval计时器实现挑战10秒

    这篇文章主要为大家详细介绍了JS使用setInterval计时器实现挑战10秒,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Bootstrap精简教程中秋大放送

    Bootstrap精简教程中秋大放送

    Bootstrap精简教程中秋大放送,这篇文章主要为大家分享了最基础的Bootstrap学习教程,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

    BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

    这篇文章主要介绍了BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法,需要的朋友可以参考下
    2016-12-12
  • 基于javascript实现简单的抽奖系统

    基于javascript实现简单的抽奖系统

    这篇文章主要为大家详细介绍了基于javascript实现简单的抽奖系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • javascript HTML5 canvas实现打砖块游戏

    javascript HTML5 canvas实现打砖块游戏

    这篇文章主要介绍了基于javascript HTML5 canvas实现打砖块游戏的具体实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript引用类型Array实例分析

    JavaScript引用类型Array实例分析

    这篇文章主要介绍了JavaScript引用类型Array,结合实例形式较为详细的分析了JavaScript数组相关的创建、检测、转换、排序、栈、队列、引用等各种常见操作技巧,需要的朋友可以参考下
    2018-07-07
  • javascript实现自动输出文本(打字特效)

    javascript实现自动输出文本(打字特效)

    文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本文给大家汇总介绍了几种打字效果的文字特效,文字一个一个地打印在页面上。
    2015-08-08
  • 认识less和webstrom的less配置方法

    认识less和webstrom的less配置方法

    下面小编就为大家带来一篇认识less和webstrom的less配置方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js控制网页背景音乐播放与停止的方法

    js控制网页背景音乐播放与停止的方法

    这篇文章主要介绍了js控制网页背景音乐播放与停止的方法,实例分析了javascript控制背景音乐的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js网页右下角提示框实例

    js网页右下角提示框实例

    这篇文章主要介绍了js网页右下角提示框的实现方法,以实例展示了css样式与HTML布局,以及对应的js显示与关闭提示框等功能,需要的朋友可以参考下
    2014-10-10

最新评论