jQuery实现Tab选项卡
2020-01-25 本文已影响0人
薛定谔的程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="icon" href="../../../img/sup.ico" type="image/x-ioc"/>
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#tab {
list-style: none;
display: block;
width: 400px;
height: 50px;
margin: 0 auto;
}
#tab li {
width: 100px;
height: 50px;
background-color: #ccc;
float: left;
text-align: center;
line-height: 50px;
}
#img li:nth-child(n+2) {/*正数第二个开始*/
display: none;
}
#img {
width: 400px;
height: 200px;
display: block;
margin: 0 auto;
list-style: none;
}
#img li img {
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<ul id="tab">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
<ul id="img">
<li><img src="../../../img/1.jpg"></li>
<li><img src="../../../img/2.jpg"></li>
<li><img src="../../../img/3.jpg"></li>
<li><img src="../../../img/4.jpg"></li>
</ul>
<script>
$(function () {
$('ul:first>li:first').css({backgroundColor: 'yellow'});
$('ul:first>li').on('mouseenter', function () {
$(this).css('background-color', 'yellow')
.siblings().css('background-color', '#ccc');
let idx = $(this).index();
// console.log(idx);//0,1,2,3
//get img index set show
let $img = $('ul:last>li>img').eq(idx);
$img.parent().show();
$img.parent().siblings().hide();
});
})
</script>
</body>
</html>
知识点：
:nth-child(n+2) {/*正数第二个开始*/
display: none;
}
:nth-child(-n+2) {/*倒数第二个开始*/
}
let $img = $('ul:last>li>img').eq(idx);//获取与上面li对应index的图片
$img.parent().show();//图片的父级li显示
$img.parent().siblings().hide();//li的兄弟元素隐藏（因为图片在li内，所以单单一个img标签没有兄弟元素可选择）
效果展示：
在这里插入图片描述
