지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Javascript는 웹 페이지에 탭을 구현합니다(두 가지 방법)

Javascript는 웹 페이지에 탭을 구현합니다(두 가지 방법)

陈政宽～
풀어 주다： 2017-06-28 11:59:21
원래의
1741명이 탐색했습니다.

이 글에서는 주로 웹 페이지에서 탭을 구현하기 위한 js 문 사용을 소개합니다(두 가지 방법). 매우 훌륭하고 참고할 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

탭은 웹 페이지에서 자주 사용됩니다. 직설적으로 말하면 옵션을 클릭하면 이 옵션의 내용이 아래에 나타납니다.

방법 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 부분에서 웹 페이지 탭의 내용을 정의합니다. 

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

클릭 기능을 추가한 후 두 번째 for 루프는 모든 oli의 className을 "empty"로 변경하고 모든 작업의 ​​스타일을 display='none'으로 변경합니다. 루프가 끝나면 현재 클릭한 oli에 className을 추가하고 아래에 해당 op 스타일을 display='block';

다음은 작업 결과입니다.

프로그램을 작성할 때 주의하세요. 탭에서 해당 부분은 다음과 같습니다. li의 수(JS의 oli.length)는 프로그램을 작성할 때 아래 내용(JS의 op.length)과 같은 ID를 가진 p에 포함된 p의 수와 동일해야 합니다. , oli.length와 op.length가 다르기 때문입니다. Equality로 인해 프로그램이 오류를 보고하지만, 간단히 말해서 오류를 오랫동안 찾을 수 없으므로 여전히 더 주의해야 합니다.

방법 2:

방법 1은 탭이 상대적으로 적은 상황에 적합하지만 탭 내용이 많으면 이 방법을 사용해야 합니다. 두 번째 방법은 선생님이 말씀하신 것에 적용됩니다. 이번 주의 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을 수정합니다. JS 부분을 직접 살펴보겠습니다. 

<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는 웹 페이지에 탭을 구현합니다(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript js 옵션
원천：php.cn
이전 기사：JavaScript는 일반 규칙을 사용하여 쉼표로 구분된 천분의 1 숫자를 구현합니다. 다음 기사：자바스크립트는 쿠키 유효 기간을 설정하고 쿠키를 감지합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿