Javascript implementiert den Tab-Switching-Effekt-js-Tutorial-php.cn

Javascript implementiert den Tab-Switching-Effekt

高洛峰

Freigeben： 2017-03-24 13:43:07

Original

1744 Leute haben es durchsucht

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:

Javascript implementiert den Tab-Switching-Effekt

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>

Nach dem Login kopieren

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;; 
} 
} 
}

Nach dem Login kopieren

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