Einfacher Code für den Menüeffekt mit verschiebbaren Registerkarten für Webseiten, implementiert in js-js-Tutorial-php.cn

Einfacher Code für den Menüeffekt mit verschiebbaren Registerkarten für Webseiten, implementiert in js

PHP中文网

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

Original

1311 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der in js implementierte einfache Schiebe-Tab-Menüeffektcode vorgestellt, der die einfache Funktion des Wechselns von Tab-Beschriftungen durch Bewegen der Maus realisieren kann. Dies ist sehr einfach und praktisch Dieser Artikel

Das Beispiel beschreibt den in js implementierten einfachen Effektcode für das Schieberegistermenü einer Webseite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Was hier vorgestellt wird, ist ein einfacher Web-Schiebetürcode, der basierend auf JS und p CSS implementiert wird. Das Schiebetür-Menü ist ein Menü, das durch einfaches Platzieren der Maus umgeschaltet werden kann. Es unterscheidet sich nur von der Webseiten-Registerkarte im Bedienformular. Um die Schiebetür-Registerkarte zu ändern, ändern Sie einfach die Onmouseover-Taste im Türmenü . Nach dem Ändern des Inhalts ist ein Mausklick auf das Türmenü erforderlich.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren