Rumah >hujung hadapan web >tutorial js >Kod kesan menu tab gelongsor halaman web mudah dilaksanakan dalam js

Kod kesan menu tab gelongsor halaman web mudah dilaksanakan dalam js

PHP中文网asal: 2017-04-18 10:45:291377semak imbas

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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery menyedari mengklik pada gambar kecil untuk memaparkan kod gambar besar sharing_jqueryArtikel seterusnya：jQuery menyedari mengklik pada gambar kecil untuk memaparkan kod gambar besar sharing_jquery

Artikel berkaitan

Lihat lagi