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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript 写类方式之七
Jul 05 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
常用的javascript设计模式
Jan 11 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
Vue使用NProgress进度条的方法
Sep 21 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防注
2007/01/15 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP解决中文乱码
2017/04/28 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
django manage.py扩展自定义命令方法
2018/05/27 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python内置函数property()如何使用
2020/09/01 Python
python调用摄像头的示例代码
2020/09/28 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
函授本科自我鉴定
2013/11/03 职场文书
护士辞职信范文
2014/01/19 职场文书
开学典礼演讲稿
2014/05/23 职场文书
经济管理专业求职信
2014/06/09 职场文书
工作求职自荐信
2014/06/13 职场文书
工作目标责任书
2014/07/23 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
交心谈心活动总结
2015/05/11 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
MySQL多表查询机制
2022/03/17 MySQL
python游戏开发之pygame实现接球小游戏
2022/04/22 Python