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 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
js完整倒计时代码分享
Sep 18 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
javascript实现固定侧边栏
Feb 09 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,不用COM,生成excel文件
2006/10/09 PHP
Smarty模板快速入门
2007/01/04 PHP
Cakephp 执行主要流程
2010/03/24 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript:Date类型全面解析
2016/05/19 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python的命名规则知识点总结
2019/10/04 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Linux文件系统类型
2012/09/16 面试题
应届生服务员求职信
2013/10/31 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
考试违纪检讨书
2014/02/02 职场文书
经营理念口号
2014/06/21 职场文书
语文课外活动总结
2014/08/27 职场文书
个人党性分析总结
2015/03/05 职场文书
Python中的嵌套循环详情
2022/03/23 Python