JS切换tab栏
今天我们来做这样一个效果：切换 tab栏
html布局:
<div class="big_box"><ul class="big_box_ul"><li class="item" style="background-color: pink;">菜单</li><li class="item">体系实战</li><li class="item">职场软技能</li></ul></div><div class="two_box"><div class="two_box_one" style="display: block;">切换tab栏内容1</div><div class="two_box_one">切换tab栏内容2</div><div class="two_box_one">切换tab栏内容3</div></div>
css代码
<style>.big_box {width: 1000px;height: 50px;background-color: red;}.big_box_ul {margin: 0;padding: 0;}.big_box_ul li {/* background-color: pink; */list-style: none;float: left;padding: 15px;margin-right: 42px;}.two_box {width: 300px;height: 300px;/* background-color: blue; */}.two_box .two_box_one {/* background-color: blue; */display: none;}</style>
js思路：
首先做这个切换tab栏需要分为两个模块来完成，我们可以把页面分为两块
第一个模块 :
第二个模块 :
我们首先来写上面的模块：
js代码
//获取元素var item = document.querySelectorAll('.item');var twoBox = document.querySelectorAll('.two_box_one');//首先给所有的菜单栏添加上点击事件for (var i = 0; i < item.length; i++) {item[i].onclick = function () {//这里可以通过alert来检查绑定上事件没有// alert(111);//排他思想第一步:1.干掉所有人for (var i = 0; i < item.length; i++) {item[i].style.backgroundColor = '';}//排他思想第一步:2.给自己添加上样式this.style.backgroundColor = 'pink';}
}
这个时候可以检查一下点击能不能生效
如果能生效的话我们就可以开始写下半部分了
做下面的内容模块需要一个核心算法思路:给上面ul里面的所有li添加自定义属性，属性值从0编号
js代码:
//获取元素var item = document.querySelectorAll('.item');var twoBox = document.querySelectorAll('.two_box_one');//首先给所有的菜单栏添加上点击事件for (var i = 0; i < item.length; i++) {//下面的内容模块 第一步:开始给5个小li设置索引号(!!!!!!!!)item[i].setAttribute('index', i);item[i].onclick = function () {//这里可以通过alert来检查绑定上事件没有// alert(111);//排他思想第一步:1.干掉所有人for (var i = 0; i < item.length; i++) {item[i].style.backgroundColor = '';}//排他思想第一步:2.给自己添加上样式this.style.backgroundColor = 'pink';//下面的内容模块 第二步:获取点击的索引号(!!!!!!!!)var index = this.getAttribute('index');//干掉所有人，让其余的item这些div隐藏for (var i = 0; i < twoBox.length; i++) {twoBox[i].style.display = 'none';}//留下我自己 让对应的item显示出来twoBox[index].style.display = 'block';}
}
最后源码附上:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.big_box {width: 1000px;height: 50px;background-color: red;}.big_box_ul {margin: 0;padding: 0;}.big_box_ul li {/* background-color: pink; */list-style: none;float: left;padding: 15px;margin-right: 42px;}.two_box {width: 300px;height: 300px;/* background-color: blue; */}.two_box .two_box_one {/* background-color: blue; */display: none;}</style>
</head><body><div class="big_box"><ul class="big_box_ul"><li class="item" style="background-color: pink;">菜单</li><li class="item">体系实战</li><li class="item">职场软技能</li></ul></div><div class="two_box"><div class="two_box_one" style="display: block;">切换tab栏内容1</div><div class="two_box_one">切换tab栏内容2</div><div class="two_box_one">切换tab栏内容3</div></div>
</body></html>
<script>//获取元素var item = document.querySelectorAll('.item');var twoBox = document.querySelectorAll('.two_box_one');//首先给所有的菜单栏添加上点击事件for (var i = 0; i < item.length; i++) {//下面的内容模块 第一步:开始给5个小li设置索引号item[i].setAttribute('index', i);//上面的菜单模块item[i].onclick = function () {//这里可以通过alert来检查绑定上事件没有// alert(111);//排他思想第一步:1.干掉所有人for (var i = 0; i < item.length; i++) {item[i].style.backgroundColor = '';}//排他思想第一步:2.给自己添加上样式this.style.backgroundColor = 'pink';//下面的内容模块//做下面的内容模块需要一个核心算法思路:给上面ul里面的所有li添加自定义属性，属性值从0编号//下面的内容模块 第二步:获取点击的索引号var index = this.getAttribute('index');//干掉所有人，让其余的item这些div隐藏for (var i = 0; i < twoBox.length; i++) {twoBox[i].style.display = 'none';}//留下我自己 让对应的item显示出来twoBox[index].style.display = 'block';}//上面的菜单模块}
</script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！