検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Javascript は Web ページにタブを実装します (2 つの方法)

Javascript は Web ページにタブを実装します (2 つの方法)

陈政宽～
陈政宽～オリジナル
2017-06-28 11:59:211727ブラウズ

この記事では、Web ページにタブを実装するための JS ステートメントの使用法 (2 つの方法) を主に紹介します。これは非常に優れており、必要な友人は参照できます。

タブは Web ページでよく使用されます。率直に言って、オプションをクリックすると、このオプションの内容が下にポップアップ表示されます。

方法 1:

方法 1 は簡単なコードを使用して実装できます。以下はすべてのコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content p{display: none;}
      #content p.active{display: block;}
      .show{background: red;}
    </style>
  </head>
  <body>
    <p id="box">
      <ul id="ul1">
        <li>首页</li>
        <li>产品</li>
        <li>新闻</li>
        <li>联系</li>
        <li>我的</li>
      </ul>
      <p id="content">
        <p class="active">
          <ul>
            <li>new1</li>
            <li>new2</li>
            <li>new3</li>
          </ul>
        </p>
        <p>
          <ul>
            <li>new4</li>
            <li>new5</li>
            <li>new6</li>
          </ul>
        </p>
        <p>
          <ul>
            <li>new7</li>
            <li>new8</li>
            <li>new9</li>
          </ul>
        </p>
        <p>
          <ul>
            <li>new10</li>
            <li>new11</li>
            <li>new12</li>
          </ul>
        </p>
          <p>
          <ul>
            <li>new13</li>
            <li>new14</li>
            <li>new15</li>
          </ul>
        </p>
      </p>
    </p>
    <script type="text/javascript">
      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var op=document.getElementById("content").getElementsByTagName("p");
        //alert(op.length)
        for(var i=0;i<oli.length;i++){
          oli[i]._index=i;
          oli[i].onclick=function(){
            //alert(i);
            for(i=0;i<oli.length;i++){
              oli[i].className=&#39;&#39;;
              op[i].style.display=&#39;none&#39;;
            }
            this.className=&#39;show&#39;;
            op[this._index].style.display=&#39;block&#39;;
          }
        }
      }
    </script>
  </body>
</html>

まず、HTML 部分で Web ページのタブのコンテンツを定義します。 

<p id="box">
      <ul id="ul1"><!--选项卡中的点击部分-->
        <li>首页</li>
        <li>产品</li>
        <li>新闻</li>
        <li>联系</li>
        <li>我的</li>
      </ul>
      <p id="content"> 
        <p class="active"><!--选项卡中要显示和被显示的部分-->
          <ul>
            <li>new1</li>
            <li>new2</li>
            <li>new3</li>
          </ul>
        </p>
        <p>
          <ul>
            <li>new4</li>
            <li>new5</li>
            <li>new6</li>
          </ul>
        </p>
        <p>
          <ul>
            <li>new7</li>
            <li>new8</li>
            <li>new9</li>
          </ul>
        </p>
        <p>
          <ul>
            <li>new10</li>
            <li>new11</li>
            <li>new12</li>
          </ul>
        </p>
          <p>
          <ul>
            <li>new13</li>
            <li>new14</li>
            <li>new15</li>
          </ul>
        </p>
      </p>
    </p>

CSS 部分は HTML のコンテンツを変更します: 

<style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content p{display: none;}
      #content p.active{display: block;}
      .show{background: red;}
    </style>

最後は最も重要な JS 部分です: 

<script type="text/javascript">
      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var op=document.getElementById("content").getElementsByTagName("p");//提取HTML中的元素
        //alert(op.length)
        for(var i=0;i<oli.length;i++){
          oli[i]._index=i;
          oli[i].onclick=function(){
            //alert(i);
            for(i=0;i<oli.length;i++){
              oli[i].className=&#39;&#39;;
              op[i].style.display=&#39;none&#39;;
            }
            this.className=&#39;show&#39;;
            op[this._index].style.display=&#39;block&#39;;
          }
        }
      }
    </script>


JS ステートメントの最初の for ループは、すべてのタブのクリックされた部分を取得することです。以下のイベント関数では I 変数にアクセスできません。i 変数は、クリックされるたびに oli.length 値にループします。したがって、i の値はカスタム要素属性に与えられ、以下で使用するためにループ内で i の値が保存されます。つまり、 oli[i]._index=i;

click 関数を追加した後の 2 番目の for ループでは、すべての oli の className を "empty" に変更し、すべての ops のスタイルを display='none'; に変更します。ループが終了したら、現在クリックされている oli に className を追加し、以下の対応する op スタイルを display='block'; として追加します。

以下は操作の結果です:

プログラムを書くときは必ず注意してください。タブ内の部分は次のとおりです。 li の数 (JS では oli.length) は、プログラムを作成したときに、以下の内容として ID を持つ p に含まれる p の数と同じである必要があります。 oli.length と op.length が異なるため、プログラムはエラーを報告しますが、要するに、エラーは長時間検出されないため、さらに注意が必要です。

方法 2:

方法 1 はタブが比較的少ない状況に適していますが、タブのコンテンツが多い場合はこの方法を使用する必要があります。先生の言ったことに 2 番目の方法を適用します。今週の JS の重要な知識: 自己実行関数 

(function a(){
  //函数里的内容      
      })(参数);

関数を定義する a(); 関数全体に括弧を追加し、次の括弧は入力パラメータです

以下は方法 2 のプログラムです。実行関数: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多个tab选项卡</title>
    <script>
      window.onload = function() {
        tab("tabMain", "click");
        tab("tabMain1", "click");
        tab("tabMain2", "click");
        tab("tabMain4", "click");
         function tab(id, event) {
        var op = document.getElementById(id);
        var oBtn = op.getElementsByTagName("li");
        var oBox = op.getElementsByTagName("p");
        for(var i = 0; i < oBtn.length; i++) {
          //console.log(i)
          (function(index) {//自执行函数
            oBtn[index].addEventListener(event, function() {
              for(var i = 0; i < oBtn.length; i++) {
                oBtn[i].className = &#39;&#39;;
                oBox[i].className = &#39;tabSide&#39;;
              }
              this.className = &#39;active&#39;;
              oBox[index].className = &#39;active&#39;;
            });//添加事件监听
          })(i)
        }
      }
      }
    </script>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .tabMenu {
        width: 300px;
        margin: 50px auto 0 auto;
      }
      .tabMenu ul {
        display: block;
        overflow: hidden;
        width: 300px;
        height: 40px;
        background: #eee;
      }
      .tabMenu ul li {
        cursor: pointer;
        display: block;
        float: left;
        width: 100px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
      }
      .tabMenu ul li.active {
        background: #f00;
        color: #fff;
      }
      .tabMenu .tabSide {
        display: none;
        padding: 10px;
        line-height: 20px;
        width: 278px;
        border: solid 1px #eee;
      }
      .tabMenu p.active {
        display: block;
        padding: 10px;
        line-height: 20px;
        width: 278px;
        border: solid 1px #eee;
      }
    </style>
  </head>
  <body>
    <p id="tabMain" class="tabMenu">
      <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <p class="tabSide active">内容1</p>
      <p class="tabSide">内容2</p>
      <p class="tabSide">内容3</p>
    </p>
    <p id="tabMain1" class="tabMenu">
      <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <p class="tabSide active">内容1</p>
      <p class="tabSide">内容2</p>
      <p class="tabSide">内容3</p>
    </p>
    <p id="tabMain2" class="tabMenu">
        <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <p class="tabSide active">内容1</p>
      <p class="tabSide">内容2</p>
      <p class="tabSide">内容3</p>
    </p>
      <p id="tabMain4" class="tabMenu">
        <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <p class="tabSide active">内容1</p>
      <p class="tabSide">内容2</p>
      <p class="tabSide">内容3</p>
    </p>
  </body>
</html>

方法 1 と同様に、まず HTML でコンテンツを記述し、CSS 部分で HTML を変更します。

<script>
      window.onload = function() {
        tab("tabMain", "click");
        tab("tabMain1", "click");
        tab("tabMain2", "click");
        tab("tabMain4", "click");
         function tab(id, event) {
        var op = document.getElementById(id);
        var oBtn = op.getElementsByTagName("li");
        var oBox = op.getElementsByTagName("p");
        for(var i = 0; i < oBtn.length; i++) {
          //alert(i)；
          (function(index) {//自执行函数
            oBtn[index].addEventListener(event,   function() {
              for(var i = 0; i < oBtn.length; i++) {
                oBtn[i].className = &#39;&#39;;
                oBox[i].className = &#39;tabSide&#39;;
              }
              this.className = &#39;active&#39;;
              oBox[index].className = &#39;active&#39;;
            });//添加事件监听
          })(i)
        }
      }
      }
    </script>

イベントと自己実行関数を追加して複数のタブを完成させます。

以上がJavascript は Web ページにタブを実装します (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript は通常のルールを使用して、カンマ区切りの 1000 分の 1 の数値を実装します。次の記事：JavaScript は通常のルールを使用して、カンマ区切りの 1000 分の 1 の数値を実装します。

関連記事

続きを見る