html检索导航切换效果,tab切换效果（点击导航切换显示内容）

效果展示

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;

}

• 111

  div1

• 222

  div2

• 333

  div3

$(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");

})

})