Kod kesan menu tab gelongsor halaman web mudah dilaksanakan dalam js-tutorial js-php.cn

Kod kesan menu tab gelongsor halaman web mudah dilaksanakan dalam js

PHP中文网

Lepaskan： 2017-04-18 10:45:29

asal

1292 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kod kesan menu tab gelongsor halaman web yang dilaksanakan dalam js, yang boleh merealisasikan fungsi mudah menukar label tab dengan meluncurkan tetikus ke atasnya. Ia sangat mudah dan praktikal artikel ini

Contoh menerangkan kod kesan menu tab gelongsor halaman web yang mudah dilaksanakan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Apa yang diperkenalkan di sini ialah kod pintu gelangsar web yang ringkas, dilaksanakan berdasarkan JS dan p CSS. Menu pintu gelangsar ialah menu yang boleh ditukar dengan hanya meletakkan tetikus padanya. Ia hanya berbeza daripada tab halaman web dalam borang operasi Untuk menukar tab pintu gelangsar, hanya tukar onmouseover dalam menu pintu kepada onclick Selepas menukarnya, tukar Kandungan memerlukan klik tetikus pada menu pintu.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页滑动门菜单</title>
<style>
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
.tab{ margin:20px; width:244px; height:200px; overflow:hidden; border:1px #AACCEE solid;}
.tab_b{ overflow:hidden; margin:5px; }
.menu{overflow:hidden; }
.menu li{ display:block; float:left; display: list-item; text-align:center; width:60px; background-color:#EDF4FC;line-height:20px; border-bottom:1px #AACCEE solid;border-right:1px #AACCEE solid; }
.menu li a{ display:block;}
.menu_d{border-bottom:1px #FFFFFF solid;background-color:#FFFFFF; }
.tab ul li.aaa{background: #FFFFFF;border-bottom:0px #FFFFFF solid;}
</style>
</head>
<body>
<script language="javascript">
function tabs(n)
{
var len = 4;
for (var i = 1; i <= len; i++)
{
document.getElementById(&#39;tab_a&#39; + i).style.display = (i == n) ? &#39;block&#39; : &#39;none&#39;;
document.getElementById(&#39;tab_&#39; + i).className = (i == n) ? &#39;aaa&#39; : &#39;none&#39;;
}
}
</script>
<p class="tab">
<ul class="menu" id="menutitle">
<li id="tab_1" class="aaa"><a href="javascript:void(0)" onclick="tabs(&#39;1&#39;);" >新闻</a></li>
<li id="tab_2" ><a href="javascript:void(0)" onmouseover="tabs(&#39;2&#39;);" >生活</a></li>
<li id="tab_3" ><a href="javascript:void(0)" onmouseover="tabs(&#39;3&#39;);" >滚动</a></li>
<li id="tab_4" ><a href="javascript:void(0)" onmouseover="tabs(&#39;4&#39;);" >旅游</a></li>
</ul>
<p class="tab_b" id="tab_a1" style="display:block;"> 国内国际新闻</p>
<p class="tab_b" id="tab_a2" style="display:none;">本土快乐生活</p>
<p class="tab_b" id="tab_a3" style="display:none;">适时新闻滚动</p>
<p class="tab_b" id="tab_a4" style="display:none;">期待完美假日</p>
</p>
</body>
</html>

Salin selepas log masuk