js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例

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

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

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

var fbUls =document.getElementById("oUl");

var fbLis = fbUls.getElementsByTagName("li");

var aDivs = document.getElementsByClassName("theDiv");

for(var i = 0,val=fbLis.length;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/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。

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

js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例相关推荐

Win+Tab键实现自定义程序列表间的窗口切换
程序是用AutoHotkey语言写的, 说明: 以自己使用频率的顺序在ExeList自定义的程序间切换切换可以以所有窗口切换,也可以按程序组切换(比如在word窗口间切换) 程序组可以分别定义排除的 ...
js 去重某个键值数组对象_js数组去重（包括对象数组去重）
2019.08.02补: 对象数组建议直接循环然后使用工具库(lodash)的深比较,评论里也有指出,文章的方法有些取巧了生产环境不要这么玩~. 方法一:利用ES6的Array.from()/扩展运 ...
js利用tab键切换当前页面_js小技巧：tab页切换
依旧只是贴在这里备份,方便以后粘贴复制,高手绕过,以免浪费时间:) tab页切换 function switchTab(ProTag, ProBox) { for (i = 1; i < 5; ...
js 去重某个键值数组对象_JS数组去重常见方法分析
数组去重是开发中经常会遇到的问题,也是面试时经常会考到的.JS实现数组去重可以有多种方法: 一.简单的去重方法用一个类比来简单解释一下这种去重方法的思路:A篮子里有若干个不同颜色和大小的球,旁边放一 ...
h5全屏切换滚动页面html,H5全屏切换
之前有做过一个微信中的H5小项目,其中有一个交互就是点击完按钮,页面由下往上滑动切换至下一页.做完后发现在Android(华为荣耀5a.华为荣耀3c和OPPO A37m)下效果都还好,但在iphone ...
mysql tab键替换为空_记事本中TAB键替换为空格键的方法
在编程过程中我们一般不希望用TAB符,但由于有些代码并不是自己编写,难免存在TAB符,下面说一下怎么利用ultraedit编辑器来查找和替换. untraedit中显示TAB和显示空格,以及换行用同一 ...
python一个tab键是几个空格_python中tab键是什么意思
对于程序员来说,其实Tab和空格远远不只是"立场"问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格 ...
实现页面上方实现输入关键字搜索出关联关键词内容的功能
Haystack是django的开源全文搜索框架(全文检索不同于特定字段的模糊查询,使用全文检索的效率更高 ),该框架支持Solr,Elasticsearch,Whoosh, **Xapian搜索引擎 ...
怎么把一个控件放到tab页面上去?_C/C++应用无障碍化如何支持Tab键浏览
一.前言我们知道,正常人操作电脑,只需一眼便能得知屏幕上的内容,要想激活某个控件,例如按钮等,只需将鼠标拖动过去点击即可. 但这对于盲人而言,却十分繁琐. 盲人使用屏幕阅读器来操作电脑,在使用某个软 ...

js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例

js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例相关推荐

最新文章

热门文章