综合案例:
本案例要完成的就是当鼠标点击上面相应的选项卡(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); //demo
console.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); //test
div.setAttribute('id','first'); //主要设置自定义属性值
console.log(div.id); //first
</script>
3.移除属性值
(1) element.removeAttribute('属性") //移除属性