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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
Javascript 布尔型分析
2008/12/22 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jQuery中:file选择器用法实例
2015/01/04 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue-router权限控制(简单方式)
2018/10/29 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
护理个人求职信范文
2014/01/08 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
青春演讲稿范文
2014/05/08 职场文书
同乡会致辞
2015/07/30 职场文书