第一天：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>Documenttitle>
<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.然后让当前元素颜色为pink
for(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>Documenttitle>
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');
//用class
div.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中的内容一一绑定最好使用自定义属性
最后，本篇内容到此，希望大家多多指教！