Heim > Artikel > Web-Frontend > Javascript implementiert den Tab-Switching-Effekt

Javascript implementiert den Tab-Switching-Effekt

高洛峰Original: 2017-03-24 13:43:071726Durchsuche

Es gibt viele verschiedene Seiteneffekte auf der aktuellen Seite. Zu den häufig verwendeten gehören der Popup-Ebeneneffekt, der nahtlose Bildlaufeffekt und der Tab-Wechseleffekt. Heute möchte ich einen Tab-Wechseleffekt teilen, den ich selbst mit nativem Javascript geschrieben habe. Aufgrund meiner begrenzten Fähigkeiten weisen Sie mich bitte auf etwaige Probleme hin.
Das Rendering ist wie folgt:

HTML-Code:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>js-tabs</title> 
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> 
<style type="text/css"> 
a{color:#a0b3d6;} 
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;} 
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;} 
.tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;} 
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;} 
</style> 
</head> 
<body> 
<p id="tabs"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;">首页</a> 
<a href="javascript:;">技术</a> 
<a href="javascript:;">生活</a> 
<a href="javascript:;">作品</a> 
</h2> 
<p>首页首页首页首页首页首页首页首页首页首页</p> 
<p class="tabs-content hide">技术技术技术技术技术技术技术技术技术技术</p> 
<p class="tabs-content hide">生活生活生活生活生活生活生活生活生活生活</p> 
<p class="tabs-content hide">作品作品作品作品作品作品作品作品作品作品</p> 
</p> 
<br/><br/> 
<p id="tabs2"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;">11111</a> 
<a href="javascript:;">22222</a> 
<a href="javascript:;">33333</a> 
</h2> 
<p>11111111111111111111111111111111111</p> 
<p class="tabs-content hide">222222222222222222222222222222222222</p> 
<p class="tabs-content hide">333333333333333333333333333333333333333</p> 
</p> 
</body> 
</html> 
<script type="text/javascript" src="tabs.js"></script> 
<script type="text/javascript"> 
window.onload = function(){ 
tabs(&#39;tabs&#39;,&#39;click&#39;); 
tabs(&#39;tabs2&#39;,&#39;mouseover&#39;); 
} 
</script>

Javascript-Code:

function tabs(id,trigger){ 
var tabsBtn = document.getElementById(id).getElementsByTagName(&#39;h2&#39;)[0].getElementsByTagName(&#39;a&#39;); 
var tabsContent = document.getElementById(id).getElementsByTagName(&#39;p&#39;); 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].index = i; 
if(trigger == &#39;click&#39;){ 
tabsBtn[i].onclick = function(){ 
clearClass(); 
this.className = &#39;on&#39;; 
showContent(this.index); 
} 
}else if(trigger == &#39;mouseover&#39;){ 
tabsBtn[i].onmouseover = function(){ 
clearClass(); 
this.className = &#39;on&#39;; 
showContent(this.index); 
} 
} 
} 
function showContent(n){ 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsContent[i].className = &#39;hide&#39;; 
} 
tabsContent[n].className = &#39;tabs-content&#39;; 
} 
function clearClass(){ 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].className = &#39;&#39;; 
} 
} 
}

Hinweis:
1. Titel wie Homepage, Technik, Leben und Werke stehen in h2-Tags.
2. Um den aktuellen Titel anzuzeigen, verwenden Sie die benannte Klasse. Wenn Sie ihn in eine andere Klasse wie „selected“ ändern, müssen Sie den entsprechenden Inhalt in tabs.js ändern.
3. Der dem Titel entsprechende Inhalt befindet sich im p-Tag. Innerhalb von p-Tags können keine weiteren p-Tags vorhanden sein.
PS: Dies sind einige Effekte, die ich beiläufig geschrieben habe, basierend auf den Javascript-Kenntnissen, die ich gelernt habe, als mir langweilig war.

Weitere Artikel zur Implementierung des Tabs-Wechseleffekts durch Javascript finden Sie auf der chinesischen PHP-Website!

Verwandte Artikel:

WeChat-Applet: Beispiel für die Implementierung des Tab-Effekts

Implementierung des Tab-Effekts im WeChat-Applet

Einfacher und stilvoller reiner CSS3-Tabs-Tab-Effekt

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：Der einfachste Tab-Wechsel basierend auf JavascriptNächster Artikel：Der einfachste Tab-Wechsel basierend auf Javascript

In Verbindung stehende Artikel

Mehr sehen