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小括号“()”的多义性
Dec 03 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
js实现无缝循环滚动
Jun 23 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JavaScript控制台的更多功能
Apr 28 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python对象转JSON字符串的方法
2016/04/27 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python 显示数组全部元素的方法
2018/04/19 Python
查看django版本的方法分享
2018/05/14 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
新浪网技术部笔试题
2016/08/26 面试题
大学生社团活动总结
2014/04/26 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
行政处罚告知书
2015/07/01 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
golang日志包logger的用法详解
2021/05/05 Golang
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技