JavaScript implements tabs in web pages (two methods)-JS Tutorial-php.cn

JavaScript implements tabs in web pages (two methods)

陈政宽～

Release： 2017-06-28 11:59:21

Original

1677 people have browsed it

This article mainly introduces the use of js statements to implement tabs in web pages (two methods). It is very good and has reference value. Friends in need can refer to it.

It is often used in web pages. Something like a tab, to put it bluntly, is to click on an option, and the contents of this option will pop up below.

Method 1:

Method 1 can be achieved by using simple code. The following is all the code;

<!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>

Copy after login

First we define the content in the web page tab in the HTML part.

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

Copy after login

The CSS part modifies the content in 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>

Copy after login

The last is the most important js part:

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

Copy after login

JS statement The first for loop in is to obtain the clicked parts of all tabs; because the I variable cannot be accessed in the event function below, the i variable loops to the oli.length value each time it is clicked. Therefore, the value of i is given to a custom element attribute to save the value of i in the loop for use below. That is: oli[i]._index=i;

After adding the click function, the second for loop is to change the className of all oli to "empty" and the style of all ops. display='none'; After the loop ends, add the className to the currently clicked oli and the style of the corresponding op below as display='block';

The following is the result of the operation:

When writing the program, you must pay attention to the click part in the tab: the number of li (oli.length in JS) must be the same as the number of p (op.length in JS) contained in p with the ID of content below. I When writing a program, because oli.length and op.length are not equal, the program reports an error, but the error cannot be found for a long time; in short, you still need to be more careful.

Method 2:

Method 1 is suitable for situations where there are relatively few tabs, but we need to use this if there are more tabs. First method, the second method is applied to a relatively important knowledge point in JS that our teacher talked about this week: self-running function

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

Copy after login

define functiona(); to the entire function Bring parentheses, and the following parentheses are input parameters;

The following is the program for the self-running function of method two:

<!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>

Copy after login

Similar to method one, first write the content in the HTML, and perform the CSS part on the HTML For modification, let’s look directly at the JS part;

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

Copy after login

Complete multiple tabs by adding events and self-running functions.

The above is the detailed content of JavaScript implements tabs in web pages (two methods). For more information, please follow other related articles on the PHP Chinese website!