jquery随笔小特效之jd菜单栏_jd菜单特效-CSDN博客

本文链接：https://blog.csdn.net/viser123/article/details/50979912

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿jd菜单栏</title>
<script src="jquery-1.11.3.js"></script>
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}

body {
padding-left: 10%;
padding-top: 5%;

}

.top {
width: 220px;
height:50px;
color: #ffffff;
font-size: 16px;
font-weight: bold;
background-color: #b1191a;
line-height: 50px;
padding-left: 10px;
}

.border {
width: 220px;
height:400px;
background-color: #c81623;
border-left: 1px solid #c81623;
}

.border li{
color: #ffffff;
font-size: 14px;
font-weight: 600;
height: 31px;
padding-left: 10px;
line-height: 31px;
}

.border .active{
background-color: #ffffff;
color: #c81623;
font-weight: 300;
}

.border .active a{
color: #c81623;
}

.kuan {
position: absolute;
left: 378px;
top:129px;
width: 500px;
height:401px;
border:1px solid #c81623;
border-left: none;
}

.detile_content {
display: none;
color: #c81623;
}

.red {
color: red;
padding: 40px 0 0 40px;
}
</style>
</head>
<body>
<div class="top">
全部商品分类
</div>
<ul class="border">
<li data-index="d1"><a href="javascript:void(0);">手机手机</a></li>
<li data-index="d2"><a href="javascript:void(0);">电脑电脑</a></li>
<li data-index="d3"><a href="javascript:void(0);">苹果苹果</a></li>
<li data-index="d4"><a href="javascript:void(0);">榴莲榴莲</a></li>
<li data-index="d5"><a href="javascript:void(0);">西瓜西瓜</a></li>
<li data-index="d6"><a href="javascript:void(0);">橙子橙子</a></li>
</ul>
<div class="kuan">
<div id="d1" class="detile_content">
手机的内容
</div>
<div id="d2" class="detile_content">
电脑的内容
</div>
<div id="d3" class="detile_content">
苹果的内容
</div>
<div id="d4" class="detile_content">
榴莲的内容
</div>
<div id="d5" class="detile_content">
西瓜的内容
</div>
<div id="d6" class="detile_content">
橙子的内容
</div>
</div>
<script>
$(document).ready(function(){
$("ul>li").hover(function(){
//菜单栏的效果
$("ul>li").removeClass("active");
$(this).addClass("active");
//下面是div里面的内容显示与隐藏
var index = $(this).data("index");
var content_id = "#" + index;
$(".kuan div").addClass("detile_content");
$(content_id).removeClass("detile_content").addClass("red")
},function(){
$("ul>li").removeClass("active");
})
});
</script>
</body>

</html>