案例"/>
第一天：tab切换栏案例
文章目录
- 前言
- 一，大概样式
- 二，代码部分
- 三，细节讲解
- 3.1 排他思想
- 3.2 设置自定义属性
- 四，解释自定义属性在此案例中的运用
- 五，不需要自定义属性能不能实现
前言
用惯了框架会发现，原生的动画和样式能够熟练写出来才是无敌。所以，第一天打卡从案例开始。也是我最近在项目中遇到的原生写法：tab栏的切换。
所用js细节：排他思想，设置自定义索引。
一，大概样式
二，代码部分
<!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>* {margin: 0;padding: 0;overflow: hidden;}.tab {width: 1200px;height: 400px;margin: 200px auto;background-color: pink;}.tab .tab_list {width: 1200px;height: 50px;background-color: rgb(235, 235, 235);}.tab .tab_list ul li {float: left;width: 120px;height: 50px;line-height: 50px;text-align: center;}.tab .tab_list ul .current {background-color: rgb(200, 22, 50);color: rgb(235, 235, 235);}/* tab_con模块开始 */.tab .tab_con .item {display: none;}</style>
</head>
<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价模块内容</div><div class="item">手机社区模块内容</div></div></div><script>//当鼠标点击上面相应的选项卡，下面的内容跟随变化//1.上的模块选项卡，点击某一个，当前这一个颜色会是红色，其余不变（排他思想）或者修改类名的方式//1.获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var item = document.querySelectorAll('.item');//2.点击事件for(var i = 0; i < lis.length; i++) {//开始给五个小li设置索引号lis[i].setAttribute('index',i);lis[i].onclick = function() {//先干掉所有人，第一步!for(var i = 0;i < lis.length; i++) {lis[i].className = '';}this.className = 'current';//下面的显示内容模块var index = this.getAttribute('index');// console.log(index);for(var i = 0; i < item.length; i++) {item[i].style.display = 'none';}item[index].style.display = 'block';}}</script>
</body>
</html>
三，细节讲解
3.1 排他思想
排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。
<!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>
</head>
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>//1.获取所有的按钮元素var btns = document.getElementsByTagName('button');//btns得到的是伪数组，里面的用索引for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {//1.我们先把所有的按钮背景颜色去掉//2.然后让当前元素颜色为pinkfor(var j = 0; j < btns.length; j++) {btns[j].style.backgroundColor = '';}this.style.backgroundColor = 'pink';}}// 如果有同一组元素 ，我们想要某一个元素实现某种样式需要用到循环算法// 第一步：干掉其他人，把样式清除// 第二部，设置自己</script>
</body>
</html>
请看以上代码：
首先我们获取到的是全部的按钮，也就是btns，btns得到的是从索引为0的伪数组。利用for循环为每个元素绑定事件。
每一次点击按钮，都要先清除所有元素的样式，于是有了第二个for循环。最后再另当前的按钮添加样式。
3.2 设置自定义属性
设置自定义属性一般用于设置索引。分为三个部分：设置，获取，删除。
先看以下代码
<!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"h><title>Document</title>
</head>
<body><div id="demo" index="1" class="my"></div><script>var div = document.querySelector('div');console.log(div.id);// element.getAttribute('属性')console.log(div.getAttribute('id'));console.log(div.getAttribute('index'));//index用来自定义属性//2.设置元素属性值div.id='test';//新方法div.setAttribute('id','book');console.log(div.id);div.setAttribute('index','2');//用classdiv.setAttribute('class',footer);div.className='fot';//移除属性div.removeAttribute('index');</script>
</body>
</html>
先给div设置了id，我么可以获取div后查询id，用getAttribute来查询其属性。
当然也恶意定义属性，用div.setAttribute('属性’名,‘自定义属性’)
同样，也可以通过removeAttribute来删除某个属性
四，解释自定义属性在此案例中的运用
我们在一开始绑定的时候就给了每一个标题li设置了自定义属性index，并且index为其伪数组中的索引号。不管i怎么变，设置的index都是固定的。
==之所以要用index是因为当我们点击li的时候会带动当前的item一起跟着变化。item在变化过程中，根据排他思想需要先清空所有样式，再根据当前li所在的索引来变化相应索引下的样式。index就很好的保证了li与item的一一对应性。
五，不需要自定义属性能不能实现
这是案例中对自定义属性的运用。可以结合上面给出的完整代码运行：
for(var i = 0; i < lis.length; i++) {//开始给五个小li设置索引号lis[i].setAttribute('index',i);lis[i].onclick = function() {//先干掉所有人，第一步!for(var i = 0;i < lis.length; i++) {lis[i].className = '';}this.className = 'current';//下面的显示内容模块var index = this.getAttribute('index');// console.log(index);for(var i = 0; i < item.length; i++) {item[i].style.display = 'none';}item[index].style.display = 'block';}}
答案是不可以！
感兴趣的话可以替换成以下代码在谷歌浏览器调试工具中尝试：
for(var i = 0; i < lis.length; i++) {//开始给五个小li设置索引号lis[i].onclick = function() {//先干掉所有人，第一步!for(var i = 0;i < lis.length; i++) {lis[i].className = '';}this.className = 'current';// console.log(index);for(var i = 0; i < item.length; i++) {item[i].style.display = 'none';}console.log(i);item[i].style.display = 'block';}}
就会发现，在执行的时候，i的值恒为5。原因是，最外层的循环是自动运行的，没有触发条件，所以i实际上是运行完毕后的结果，也就是最大值。因此，我们如果要让导航栏中的li与item中的内容一一绑定最好使用自定义属性
最后，本篇内容到此，希望大家多多指教！
更多推荐
第一天：tab切换栏案例
发布评论