代碼如下
HTML
<div>
<ul id="top">
<li>標(biāo)題一</li>
<li>標(biāo)題二</li>
<li>標(biāo)題三</li>
</ul>
<div class="clear"></div>
<div id="tab" class="tab">
<div>
<h1>我是第一個(gè)</h1>
<p>我是一行文本</p>
</div>
<div>
<h1>我是第二個(gè)</h1>
<p>我是一行文本</p>
</div>
<div>
<h1>我是第三個(gè)</h1>
<p>我是一行文本</p>
</div>
</div>
</div>
css
#top li{ float: left; margin-left: 20px; padding: 10px;cursor: pointer;
border: 1px solid rgba(17, 169, 240, 0.603); }
.clear{clear: both; }
.select{background: rgb(211, 132, 132); }
.tab div{margin-left: 60px; display: none; }
#tab1{display: block;}
js
$('#top li').mouseover(function(){
let i = $(this).index(); // 下標(biāo)
$(this).addClass('select').siblings().removeClass('select'); 給li添加背景
$('#tab div').eq(i).show(200).siblings().hide(500); // 給對(duì)應(yīng)下標(biāo)的文本div設(shè)置顯示/隱藏的動(dòng)畫
})
