Heim > Artikel > Web-Frontend > Einfacher Code für den Menüeffekt mit verschiebbaren Registerkarten für Webseiten, implementiert in js

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

PHP中文网Original: 2017-04-18 10:45:291292Durchsuche

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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery erkennt, dass durch Klicken auf das kleine Bild der große Bildcode „sharing_jquery“ angezeigt wirdNächster Artikel：jQuery erkennt, dass durch Klicken auf das kleine Bild der große Bildcode „sharing_jquery“ angezeigt wird

In Verbindung stehende Artikel

Mehr sehen