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使用手册之三 CSS操作
Mar 24 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php文件上传的简单实例
2013/10/19 PHP
php自动加载方式集合
2016/04/04 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
js读写json文件实例代码
2014/10/21 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
loading动画特效小结
2017/01/22 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
Python json模块使用实例
2015/04/11 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
怎样声明子类
2013/07/02 面试题
公司联欢晚会主持词
2014/03/22 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript