ホームページ > 記事 > ウェブフロントエンド > Javascriptでタブ切り替え効果を実装

Javascriptでタブ切り替え効果を実装

高洛峰オリジナル: 2017-03-24 13:43:071745ブラウズ

現在のページには、ポップアップレイヤー効果、シームレスなスクロール効果、タブ切り替え効果など、さまざまなページ効果があります。今日は、ネイティブ JavaScript を使用して自分で作成したタブ切り替えエフェクトを共有します。私のスキルが限られているため、問題がある場合はご指摘ください。
レンダリングは次のとおりです:

htmlコード:

<!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コード:

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

注:
1. ホームページ、技術、生活、作品などのタイトルはh2タグ内にあります。
2. 現在のタイトルを表示するには on というクラスを使用します。selected などの別のクラスに変更する場合は、tabs.js の対応するコンテンツを変更する必要があります。
3. タイトルに該当する内容はpタグ内にあります。 p タグ内にそれ以上の p タグを含めることはできません。
追伸: これらは、暇なときに学んだ JavaScript の知識に基づいて、何気なく書いたエフェクトです。

タブ切り替え効果の JavaScript 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

WeChatミニプログラム:タブタブ効果の実装例

WeChatミニプログラムタブタブ効果の実装

シンプルでスタイリッシュな純粋なCSS3タブタブ効果

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptをベースにした最もシンプルなタブ切り替え次の記事：JavaScriptをベースにした最もシンプルなタブ切り替え

続きを見る

Javascriptでタブ切り替え効果を実装

関連記事