文章目录
- 综合案例：
- 案例分析：
- 示例代码：
- 自定义属性的操作：
- 1.获取属性值：
- 2.设置属性值
- 3.移除属性值
综合案例：
本案例要完成的就是当鼠标点击上面相应的选项卡(tab),下面内容跟随变化：
比如此时我们在商品介绍页面，然后我们单击售后保障选项卡：
可以看到下面的内容也会发生变化
案例分析：
(1) tab栏切换有两个大的模块（布局html）
(2) 模块选项卡中，点击某一个，当前这一个底色会是红色，其余不变(排他思想
(3) 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到选项卡里面
最终效果：
默认状态：
单击售后保障选项卡：
单击商品评价选项卡：
示例代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0%;padding: 0;box-sizing: border-box;}.big {width: 600px;height: 500px;margin: 200px auto;}.box1 {width: 100%;height: 40px;background-color: rgb(231, 231, 231);}ul {list-style: none;display: flex;}.box1 li {display: block;text-align: center;line-height: 40px;width: 120px;height: 40px;}p {display: none;}p:first-child {display: block;}li:first-child {background-color: red;}</style></head><body><div class="big"><div class="box1"><ul><li >商品介绍</li><li >规格与包装</li><li >售后保障</li><li >商品评价</li><li >手机社区</li></ul></div><div class="box2"><p class="item">商品介绍模块内容</p><p class="item">规格与包装模块内容</p><p class="item">售后保障模块内容</p><p class="item">商品评价模块内容</p><p class="item">手机社区模块内容</p></div></div></body> <script>var box1 = document.querySelector('.box1');var lis = box1.querySelectorAll('li');var items = document.querySelectorAll('.item');for(var i = 0;i<lis.length;i++){lis[i].setAttribute('index',i);//给所有li添加属性index//点击某一个，当前这一个底色会是红色，其余不变lis[i].onclick = function() {for(var j = 0;j<lis.length;j++){lis[j].style.backgroundColor = 'rgb(231, 231, 231)';//第一次循环将所有栏变成原来的颜色}this.style.backgroundColor = 'red';var index = this.getAttribute('index');//获取当前点击的是第几个栏for(var i = 0;i<items.length;i++){items[i].style.display = 'none';//先将所有内容样式都设置为不显示}items[index].style.display = 'block';//将当前栏对应样式设置显示}}</script>
</html>
下面学习一下本例用到的相关知识点
自定义属性的操作：
1.获取属性值：
（1） element.属性 //用于获取内置属性值
（2） element.getAttribute('属性') //主要获得自定义的属性（指程序员自己定义的属性）
代码示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="demo"></div></body><script>var div = document.querySelector('#demo');console.log(div.id); //democonsole.log(div.getAttribute('id')); //demo</script>
</html>
但是在上例中我们获取的是元素属性值，并不是自定义属性值。虽然element.Attribute(‘属性’) 同样可以获取内置属性值，但是我们还是建议用element.属性 这样简单的方法。
如果div里添加了一个 index 属性，这是我们自定义的属性：
<div id="demo" index = "1"></div>console.log(div.getAttribute('index')); //1
这就是通过getAttribute来获取自定义属性。
2.设置属性值
（1） element.属性 = '值' //用于设置内置属性值
（2） element.setAttribute('属性') //主要设置自定义的属性（指程序员自己定义的属性）
示例代码：
<body><div id="demo"></div>
</body>
<script>var div = document.querySelector('#demo');div.id = 'test'; //主要针对内置属性console.log(div.id); //testdiv.setAttribute('id','first'); //主要设置自定义属性值console.log(div.id); //first
</script>
3.移除属性值
（1） element.removeAttribute('属性") //移除属性
