JavaScript实现的简单Tab点击切换功能示例


Posted in Javascript onJuly 06, 2018

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

<!DOCTYPE html>
<html>
<head>
  <title>3water.com tab点击切换</title>
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }
  #example{
    width: 500px;
    height: 400px;
    margin: 0 auto;
  }
  #example .hd ul li{
    display: inline-block;
    width: 32%;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background-color: #333;
    text-align: center;
    color: #fff;
  }
  #example .hd ul li.current{
    background-color: green;
  }
  #example .bd{
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #example .bd ul li{
    display: none;
  }
  #example .bd ul li.current{
    display: block;
  }
  </style>
</head>
<body>
  <div id="example">
    <div class="hd">
      <ul>
        <li class="current">Beijing</li>
        <li>Shanghai</li>
        <li>Guangzhou</li>
      </ul>
    </div>
    <div class="bd">
      <ul>
        <li class="current">This is Beijing!</li>
        <li>This is Shanghai</li>
        <li>This is Guangzhou</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
  var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li");
  var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li");
  for (var i = 0; i < hd.length; i++) {
    hd[i].onclick = function(){
      doTabs(this);
    }
  }
  function doTabs(obj){
    for (var i = 0; i < hd.length; i++) {
      if(hd[i]==obj){
        hd[i].className = "current";
        bd[i].className = "current";
      }else{
        hd[i].className = "";
        bd[i].className = "";
      }
    }
  }
  </script>
</body>
</html>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

JavaScript实现的简单Tab点击切换功能示例

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

Javascript 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
tsconfig.json配置详解
May 17 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
vue.js动画中的js钩子函数的实现
Jul 06 #Javascript
老生常谈JS中的继承及实现代码
Jul 06 #Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 #Javascript
vue.js计算属性computed用法实例分析
Jul 06 #Javascript
vue.js实现的绑定class操作示例
Jul 06 #Javascript
You might like
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
python简单程序读取串口信息的方法
2015/03/13 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python使用建议与技巧分享(二)
2020/08/17 Python
通过代码实例了解Python异常本质
2020/09/16 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
房屋租赁协议书范本
2014/04/10 职场文书
伊索寓言教学反思
2014/05/01 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书