<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
<title>jquery选项卡</title>
<style>
* {
margin: 0 auto;
padding: 0 auto;
}
.nav {
margin: 30px auto;
width: 300px;
}
ul {
list-style: none;
padding: 0;
}
li {
display: table-cell;
height: 20px;
line-height: 20px;
border-right: 1px solid black;
background-color: #10aea3;
padding-right:5px ;
}
.hide {
display: none;
}
.current {
background-color: #91cebf;
color: #e6e6e6;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<!--index为选项卡的索引，current为该选项卡激活的样式，onclick为点击事件-->
<li index="a1" class="current" onclick="tab(this);">BMW</li>
<li index="a2" onclick="tab(this);">Benz</li>
<li index="a3" onclick="tab(this);">Volvo</li>
</ul>
<div class="content">
<div id="a1">
<img src="1.jpg" alt="BMW" width="300" >
</div>
<div id="a2" class="hide">
<img src="2.jpg" alt="Benz" width="300" >
</div>
<div id="a3" class="hide">
<img src="3.jpg" alt="Volvo" width="300" >
</div>
</div>
</div>
<script>
function tab(self) {
$(self) //这里采用链式写法
.addClass('current') //添加current样式
.siblings() //将其它非当前选项卡的高亮样式取消,先选择当前的兄弟节点
.removeClass('current'); //如果有兄弟节点有current，则把他移除
var box = '#'+$(self).attr('index'); //获取当前的自定义索引属性,获取当前点击的是哪一个
$(box)
.removeClass('hide') //去掉隐藏样式
.siblings() //获取其他兄弟节点
.addClass('hide'); //给它们添加hide，隐藏他们
}
</script>
</body>
</html>
