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


Posted in Javascript onJune 20, 2019

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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.3water.com/code/HtmlJsRun,测试上述代码运行效果。

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

Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
Javascript自定义事件详解
Jan 13 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 #Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
javascript获取select值的方法完整实例
Jun 20 #Javascript
node基于async/await对mysql进行封装
Jun 20 #Javascript
JavaScrip数组去重操作实例小结
Jun 20 #Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 #Javascript
JavaScript命名空间模式实例详解
Jun 20 #Javascript
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
简单的js表格操作
2016/09/24 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
tween.js缓动补间动画算法示例
2018/02/13 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
js实现抽奖功能
2020/11/24 Javascript
学习python处理python编码问题
2011/03/13 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python常用知识梳理(必看篇)
2017/03/23 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
党建工作汇报材料
2014/12/24 职场文书
见习期个人总结
2015/03/05 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书