jq练习 网易 tab栏的实现
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
border-style: none;
list-style: none;
}
#outer {
height: 200px;
width: 220px;
margin: 100px;
}
ul {
border-top: #8E2780 solid 1px;
}
ul li {
cursor: pointer;
float: left;
margin: 0;
padding: 4px 15px;
background-color: lightgray;
border: 1px solid #887A7A;
border-collapse: collapse;
}
ul li:hover {
background-color: #fff;
border-style: none;
}
div {
}
dt, dd {
float: left;
}
.hide {
display: none;
}
.l-show {
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
<ul>
<li>娱乐</li>
<li>电视</li>
<li>电影</li>
</ul>
<div class="l-show current">
<dl>
<dt><img src="images/01.jpg"/></dt>
<dd>
<p>园子温"魔鬼</p>
<p>园子温"魔鬼</p>
<p>园子温"魔鬼</p>
<p>园子温"魔鬼</p>
<p>园子温"魔鬼</p>
</dd>
</dl>
</div>
<div class="l-show hide">
<dl>
<dt><img src="images/02.jpg"/></dt>
<dd>
<p>333</p>
<p>333</p>
<p>333</p>
<p>园333鬼</p>
<p>333魔鬼</p>
</dd>
</dl>
</div>
<div class="l-show hide">
<dl>
<dt><img src="images/03.jpg"/></dt>
<dd>
<p>园子温"魔鬼</p>
<p>园2魔鬼</p>
<p>园2"魔鬼</p>
<p>园2魔鬼</p>
<p>2鬼</p>
</dd>
</dl>
</div>
</div>
<script>
$(document).ready(function(e) {
$("#outer ul li").hover(function(){
console.log("click");
var liIndex=$(this).index();
//$(this).parent().siblings().addClass("hide");
//$(this).parent().siblings().eq(liIndex).removeClass("hide");
$(this).parent().siblings().addClass("hide").eq(liIndex).removeClass("hide");
});
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15288038/3029481
页:
[1]