脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS tab切换并显示相应内容模块

JS实现的tab切换并显示相应内容模块功能示例

 更新时间：2019年08月03日 10:13:22   作者：sennyla  
这篇文章主要介绍了JS实现的tab切换并显示相应内容模块功能,结合实例形式分析了JavaScript基于事件响应、元素遍历实现页面tab切换功能相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现的tab切换并显示相应内容模块功能。分享给大家供大家参考，具体如下：

思路：一层循环遍历操作的元素并获取当前遍历到的元素的下标，通过下标去选择显示对应的内容模块。

二层循环将元素恢复操作前的状态。

<!--- JS -->

var fbUls =document.getElementById("oUl");
var fbLis = fbUls.getElementsByTagName("li");
var aDivs = document.getElementsByClassName("theDiv");
for(var i = 0,val=fbLis.length;i<val;i++){
 fbLis[i].index = i; //存放当前元素的下标
 fbLis[i].onclick = function(){
  for(var j=0; j< fbLis.length; j++){
   fbLis[j].className="";
   aDivs[j].style.display = "none";
  }
  //给当前点击的元素添加活跃标记
  this.className="liactive";
  //显示对应的模块内容
  aDivs[this.index].style.display = "block";
 };
}

<!-- HTML -->

<div>
 <ul id="oUl">
  <li class="liactive">首页</li>
  <li>产品</li>
  <li>合作</li>
 </ul>
</div>
<div class="theDiv" id="oDiv1" style="display:block;">首页模块内容：这是首页</div>
<div class="theDiv" id="oDiv2">产品模块内容：这是产品</div>
<div class="theDiv" id="oDiv3">合作模块内容：这是合作</div>

<!-- 效果 -->

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。

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

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

您可能感兴趣的文章:

相关文章

  • javascript计算用户打开网页的停留时间

    javascript计算用户打开网页的停留时间

    本文介绍了javascript计算用户打开网页的停留时间，大家参考使用吧
    2014-01-01
  • 使用webpack-dev-server处理跨域请求的方法

    使用webpack-dev-server处理跨域请求的方法

    本篇文章主要介绍了使用webpack-dev-server处理跨域请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 浅谈一种让小程序支持JSX语法的新思路

    浅谈一种让小程序支持JSX语法的新思路

    这篇文章主要介绍了浅谈一种让小程序支持JSX语法的新思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • js实现简易购物车功能

    js实现简易购物车功能

    这篇文章主要为大家详细介绍了js实现简易购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JS简单实现String转Date的方法

    JS简单实现String转Date的方法

    这篇文章主要介绍了JS简单实现String转Date的方法,涉及JavaScript字符串与日期相互转换的相关技巧,需要的朋友可以参考下
    2016-03-03
  • Javascript如何实现对象扁平化实例详解

    Javascript如何实现对象扁平化实例详解

    这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下
    2022-11-11
  • DWR内存兼容及无法调用问题解决方案

    DWR内存兼容及无法调用问题解决方案

    这篇文章主要介绍了DWR内存兼容及无法调用问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 跨域表单提交状态的变相判断代码

    跨域表单提交状态的变相判断代码

    通过表单在iframe内向一个跨域的url提交的时候，如何判断提交成功了呢？这个，基本上，很难，因为浏览器安全沙箱的限制，我们没有办法通过获得iframe内部不同域页面的信息。
    2009-11-11
  • 如何创建 JavaScript 自定义事件

    如何创建 JavaScript 自定义事件

    这篇文章主要介绍了如何创建 JavaScript 自定义事件，我们将通过文章学习到有关创建自定义事件，侦听自定义事件以及创建双击自定义事件所要了解的内容,需要的朋友可以参考一下
    2022-05-05
  • JavaScript中的稀疏数组与密集数组[译]

    JavaScript中的稀疏数组与密集数组[译]

    一般来说,JavaScript中的数组是稀疏的,也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组
    2012-09-09

最新评论