search

Home >Web Front-end >JS Tutorial >JavaScript implements tabs in web pages (two methods)

JavaScript implements tabs in web pages (two methods)

陈政宽～
陈政宽～Original
2017-06-28 11:59:211744browse

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>

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>

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>

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>


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(){
  //函数里的内容      
      })(参数);

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>

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript uses regular rules to implement comma-separated thousandths of numbers.Next article：JavaScript uses regular rules to implement comma-separated thousandths of numbers.

Related articles

See more