js实现tab菜单(选项卡)
来源:互联网 发布:在手机上怎么开淘宝店 编辑:程序博客网 时间:2024/05/16 16:20
//获取DOM元素
var box = document.getElementById('box'); //最大的盒子
var ul = box.children[0];
var div = box.children[1];
var liArr = ul.children;
var divArr = div.children;
for(var i=0;i<liArr.length;i++){
liArr[i].index = i;
//console.log(liArr[i].index)
liArr[i].onclick=function(){//初始化init
for(var j=0;j<divArr.length;j++){//干掉所有人clearAll
divArr[j].style.display="none";
}
divArr[this.index].style.display="block";//留下我一个liveMe
}
var box = document.getElementById('box'); //最大的盒子
var ul = box.children[0];
var div = box.children[1];
var liArr = ul.children;
var divArr = div.children;
for(var i=0;i<liArr.length;i++){
liArr[i].index = i;
//console.log(liArr[i].index)
liArr[i].onclick=function(){//初始化init
for(var j=0;j<divArr.length;j++){//干掉所有人clearAll
divArr[j].style.display="none";
}
divArr[this.index].style.display="block";//留下我一个liveMe
}
}
//html部分
<div id="box">
<ul>
<li>衣服</li>
<li>鞋子</li>
<li>裤子</li>
<li>袜子</li>
</ul>
<div>
<div>衣服</div>
<div>鞋子</div>
<div>裤子</div>
<div>袜子</div>
</div>
</div>
阅读全文
0 0
- js实现tab菜单(选项卡)
- js实现选项卡(Tab)
- JS实现Tab标签(选项卡)切换效果
- 使用js实现tab选项卡效果
- [Tab选项卡菜单(一)]位于顶部的tab选项卡菜单
- js实现菜单选项
- 简单的android选项卡Tab菜单TabHost(一)同一Activity上实现
- 选项卡实现Tab
- 【Android】FragmentTabHost实现底部Tab菜单选项
- JS实现选项菜单(实例)
- tab标签(选项卡)切换实现
- tab标签(选项卡)切换实现
- tab选项卡js效果
- vue.js--Tab选项卡
- JS 操作Tab选项卡
- vue.js--Tab选项卡
- vue.js--Tab选项卡
- Js tab栏选项卡
- leetcode_41. First Missing Positive ? 待解决
- xml封装成对象(1-1)
- [转]Shadowsocks RCE分析
- 开启数据科学职业生涯的8个基本技巧
- android studio升级到3.0之后,注解插件Butterknife 8.8.1出错的问题
- js实现tab菜单(选项卡)
- DES方式加解密的简单介绍
- 6-2 多态性与虚函数
- 20171124学习强化学习,尽快出论文,Q-learning2.1
- Struts Action实例化,从源码上分析
- warning: Using 'getaddrinfo' in statically linked applications requires at runtime the shared librar
- Eclipse 优化
- DDoS攻击
- [BZOJ]3489 A simple rmq problem 主席树套树