JS實現(xiàn)鼠標(biāo)經(jīng)過懸浮切換

<title>JS實現(xiàn)鼠標(biāo)經(jīng)過懸浮切換</title>
<!-- //js實現(xiàn)鼠標(biāo)懸浮切換 setTab 代碼實現(xiàn) -->
<style>
.Menubox{width: 400px;height: 400px;margin: auto;}
.Menubox ul li{width: 100px;height: 50px;background-color: #CCCC00;margin-top: 10px;text-align: center;line-height: 50px;}
.Contentbox div{width: 600px;height: 100px;margin: auto;}
</style>

<div class="Menubox">
<ul>
<li id="one1" onmouseover="setTab('one',1,4)" >新聞1</li>
<li id="one2" onmouseover="setTab('one',2,4)" class="hover">新聞2</li>
<li id="one3" onmouseover="setTab('one',3,4)">新聞3</li>
<li id="one4" onmouseover="setTab('one',4,4)">新聞4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1"style="background:#CCCC00;">新聞列表1</div>
<div id="con_one_2" style="background:#FFCCCC;display:none">新聞列表2</div>
<div id="con_one_3" style="background:#CCCCFF;display:none">新聞列表3</div>
<div id="con_one_4" style="background:#99CC33;display:none">新聞列表4</div>
</div>


</body>

<script>
function setTab(name, cursel, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var con = document.getElementById("con_" + name + "_" + i);
menu.className = i == cursel ? "hover" : "";
con.style.display = i == cursel ? "block" : "none";
}
}
</script>

分享名稱：JS實現(xiàn)鼠標(biāo)經(jīng)過懸浮切換
本文地址：http://www.bm7419.com/news27/148327.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、云服務(wù)器、網(wǎng)頁設(shè)計公司、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)