效果展示
2020-08-09_151202.png
2020-08-09_151225.png
*{
margin: 0;
padding: 0;
}
.cons{
width: 1200px;
position: relative;
left: 50%;
margin-left: -600px;
}
.nav{
width: 900px;
height: 70px;
}
ul{
list-style-type: none;
width: 900px;
height: 70px;
}
ul>li{
width: 300px;
height: 70px;
float: left;
}
ul>li>h3{
width: 300px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: #00AAAA;
color: #FFFFFF;
}
ul>li>div{
width: 1196px;
height: 500px;
position: absolute;
left: 0px;
background-color: #4169E1;
display: none;
}
$(function(){
$("ul>li").click(function(){
$(this).children("h3").css("background","#620816").end().children("div").css("display","block");
$(this).siblings().children("h3").css("background","#00AAAA").end().children("div").css("display","none");
})
})