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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
js自定义事件代码说明
2011/01/31 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python简单操作excle的方法
2018/09/12 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
采购部岗位职责
2013/11/24 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
教师一帮一活动总结
2014/07/08 职场文书
民主评议党员工作总结
2014/10/20 职场文书
单位未婚证明范本
2014/11/25 职场文书
单位考核聘任报告
2015/03/02 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
JavaScript实现优先级队列
2021/12/06 Javascript
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python