JavaScript实现的简单Tab点击切换功能示例

 更新时间:2018年07月06日 14:46:24   作者:h5css3_linhuai  
这篇文章主要介绍了JavaScript实现的简单Tab点击切换功能,涉及JavaScript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现的简单Tab点击切换功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 浅谈layui使用模板引擎动态渲染元素要注意的问题

    浅谈layui使用模板引擎动态渲染元素要注意的问题

    今天小编就为大家分享一篇浅谈layui使用模板引擎动态渲染元素要注意的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript仿支付宝密码输入框

    JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签
    2015-12-12
  • 移动端点击态处理的三种实现方式

    移动端点击态处理的三种实现方式

    在移动端开发的时候,常常需要加点击态,就是当用户点击某个URL时,给相应的标签添加按下效果样式。这篇文章给大家分享了三种实现方法,包括伪类:active、webkit-tap-highlight-color和touch事件,下面来一起看看详细的介绍吧。
    2017-01-01
  • Javascript字符串浏览器兼容问题分析

    Javascript字符串浏览器兼容问题分析

    这篇文章主要介绍了Javascript字符串浏览器兼容问题,实例形式对比分析了不兼容字符串与兼容字符串的区别,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • 小程序组件之仿微信通讯录的实现代码

    小程序组件之仿微信通讯录的实现代码

    这篇文章主要介绍了小程序组件之仿微信通讯录的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 使用JS和canvas实现gif动图的停止和播放代码

    使用JS和canvas实现gif动图的停止和播放代码

    这篇文章主要介绍了使用JS和canvas实现gif动图的停止和播放代码,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • Next.js解决axios获取真实ip问题方法分析

    Next.js解决axios获取真实ip问题方法分析

    这篇文章主要介绍了Next.js解决axios获取真实ip问题方法分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JS库之wow.js使用方法

    JS库之wow.js使用方法

    近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结,需要的朋友参考下吧
    2017-09-09
  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    下面小编就为大家带来一篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript获取路径设计源码

    JavaScript获取路径设计源码

    JavaScript获取路径的方法有很多,网上也可以搜索的到,下面本例也要为大家讲解下,有源码及结果截图
    2014-05-05

最新评论