タブクリック切り替えのJavaScript実装コード共有例（画像とテキスト）

タブ切り替え効果は、クリック切り替え、スライド切り替え、遅延切り替え、自動切り替え、その他の効果を含めて、今日の Web ページで広く使用されています。このブログ投稿では、タブ クリック切り替えの効果を実現するためにネイティブ JavaScript を使用します。

タブ切り替え効果は、クリック切り替え、スライド切り替え、遅延切り替え、自動切り替え、その他の効果を含めて、今日の Web ページで広く使用されています。このブログ投稿では、タブ クリック切り替えの効果を実現するためにネイティブ Javascript を使用しています

1。 . 関数実装

html パートhtml 部分

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p style="display:block;">第一个Nian糕</p>
<p>第二个Nian糕</p>
<p>第三个Nian糕</p>

css 部分

p {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}

接下来是 JS 部分，根据每一步要实现的功能，进而转换成代码，每当我们要实现一个效果的时候，先不要急着去敲代码，而是先思考要怎么去实现，结构是什么样的，某个功能需要用到什么事件等等，自己在脑海里把整个流程过一遍，再去把每一步的逻辑转换成代码

a. 获取元素

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

注释： document.getElementsByTagName 返回的是一个[类数组对象]，可以使用数组的方法对其进行处理，但类数组对象并不具有数组所具有的方法

b. 给元素绑定点击事件

//第一个按钮的点击事件
btnList[0].onclick = function () {
 btnList[0].style.color = "#fff";
 btnList[0].style.backgroundColor = "#f60";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";
 pList[0].style.display = "block";    
 pList[1].style.display = "none";    
 pList[2].style.display = "none";    
}

//第二个按钮的点击事件
btnList[1].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "#fff";
 btnList[1].style.backgroundColor = "#f60";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";  
 pList[0].style.display = "none";    
 pList[1].style.display = "block";    
}

//第三个按钮的点击事件
btnList[2].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "#fff";
 btnList[2].style.backgroundColor = "#f60";
 pList[0].style.display = "none";    
 pList[1].style.display = "none";    
 pList[2].style.display = "block";  
}

现在我们已经实现了一个 Tab 切换的效果了，来看一下效果

虽然很简陋，但已经达到我们想要的效果了，读者可根据自己想要的样式来设置 CSS，接下来我们要做的就是，对 JS 代码进行优化

2. 优化

a. 获取元素

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

b. 给每一个 button 元素绑定点击事件

for(var i = 0; i < btnList.length; i++ ) {
 btnList[i].index = i; //给每个按钮添加index属性，标记是第几个按钮
 btnList[i].onclick = function() {
  for(var j = 0; j < btnList.length; j++) {
   //将所有的按钮样式去掉，块隐藏
   btnList[j].style.color = "";
   btnList[j].style.backgroundColor = "";
   pList[j].style.display = "none";
  }
  //给点击的按钮添加样式，对应的块显示
  this.style.color = "#fff";
  this.style.backgroundColor = "#f60";
  pList[this.index].style.display = "block";
 }
}

index 返回字符位置，它是被搜索字符串中第一个成功匹配的开始位置，从零开始

this 是 Javascript 的一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用 this，关于 this 的值，会跟随函数使用场景的不同而发生变化，但是我们只需要记住一个原则就可以了，this 指的是调用函数的那个对象

在这里 this 指向对应的点击按钮，我们可以通过控制台打印来看到 this 所输出的内容

3. Let 命令

ES 6 中新增了 let 命令，用来声明变量，其用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效

在上面的代码中，我们在代码块里，分别用 var 和 let 声明了两个变量，接着在代码块内外打印这两个变量，可以看到，var 声明的变量返回了正确的值，代码块内打印 let 声明的变量返回了正确的值，而在代码块外打印 let 声明的变量报错，这表明，let 声明的变量只在它所在的代码块有效

上面代码中，变量 i 是 var 声明的，在全局范围内都有效，所以全局只有一个变量 i，每一次循环，变量 i 的值都会发生改变，而循环内被赋给数组 a 的 function 在运行时，会通过闭包读到这同一个变量 i，导致最后输出的是最后一轮的 i 的值，也就是 10，而如果使用 let

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

cssパート

for(let i = 0; i < btnLists.length; i++) {
 btnLists[i].onclick = function() {
  for(var j = 0;j < btnLists.length;j++){
   btnLists[j].style.color="";
   btnLists[j].style.backgroundColor="";
   pLists[j].style.display="none";
  }
  this.style.color = "yellow";
  this.style.backgroundColor="#f60";
  pLists[i].style.display="block";
 }
}

次はJS

パートです 各ステップで実装する関数は効果を実現したいときは、急いでコードを入力するのではなく、最初にコードを実装する方法、構造がどのようなものであるか、特定の関数を使用する必要があるかどうかを考えます。 a href="http://www.php.cn/js/js-jspopular-guide-event.html" target="_blank">イベント

などを頭の中で一通り確認し、ロジックを変換します各ステップをコードに追加します

a. 要素を取得します

rrreee🎜注: document.getElementsByTagName は [配列のようなオブジェクト] を返しますが、これは配列メソッドを使用して処理できます。同様のオブジェクトには、配列にあるメソッドがありません🎜🎜🎜b. クリック イベントを要素にバインドします🎜🎜rrreeerrreeerrreee🎜タブ切り替え効果を実装したので、その効果を見てみましょう🎜🎜🎜🎜🎜非常にシンプルですが、望んでいた効果が得られました。さて、読者の皆様次に行う必要があるのは、JS コードの最適化です 🎜🎜🎜🎜 a. 要素 🎜🎜rrreee🎜🎜 を取得します。要素は、クリック イベント🎜🎜rrreee🎜index をバインドして、🎜文字列 🎜 内で最初に一致した最初の一致の開始位置 (ゼロから始まります) 🎜🎜これは Javascript のキーワードです。これは、実行時に自動的に生成される 関数 🎜 を表します。 this は関数内でのみ使用できます。this の値は関数のさまざまな使用シナリオによって異なりますが、覚えておく必要があるのは 1 つの原則だけで十分です。これは関数を呼び出すオブジェクトを指します🎜🎜ここでは、これが次のことを指します。対応するクリックボタンをクリックすると、これによって出力されるコンテンツをコンソール印刷で確認できます🎜🎜🎜🎜🎜🎜3. 変数 🎜 を宣言するための let コマンドを追加しました。その使用法は var ですが、宣言された変数は let でのみ使用されます。 コマンドが配置されているコード ブロック内でのみ有効です🎜🎜🎜🎜🎜 上記のコードでは、var と let をそれぞれコード ブロック内に配置し、これら 2 つの変数をコード ブロックの内側と外側に出力します。ご覧のとおり、<code>var で宣言された変数は正しい値を返し、 で宣言された変数は正しい値を返します。 >let はコード ブロック内で出力され、let で宣言された変数は正しい値を返し、let はコード ブロックの外で出力されます。 <code>let で宣言された変数が、それが配置されているコード ブロック内でのみ有効であることを示すエラーが報告されます🎜🎜🎜🎜🎜上記のコードでは、変数 i は var によって宣言されており、グローバル スコープで有効であるため、 1 つのグローバル変数 i、ループ🎜ごとに、変数 i 値が変更され、ループ内の配列 a に割り当てられた 関数 は、クロージャを通じて同じ変数 i を読み取ります。 > の最終出力は、 i の最後のラウンドの値、つまり 10 になります。 let を使用する場合、宣言された変数はその範囲内でのみ有効です。最後に、出力は 6🎜🎜🎜a です。要素 🎜🎜rrreee🎜🎜b を取得します。同様に、i の値もコンソールに出力します。 🎜

ファイルの終わり

執筆過程で間違いや不備が現れることは避けられませんが、より多くの人に誤解を与えないよう修正していただければ幸いです。

以上がタブクリック切り替えのJavaScript実装コード共有例（画像とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。