네이티브 JS를 사용하여 탭 전환 효과를 얻는 방법(코드 첨부)

탭에 관해 말하면 누구나 익숙할 것입니다. 그런데 탭 전환 효과를 얻기 위해 기본 JS를 사용하는 방법을 알고 계십니까? 이 기사에서는 탭 탭을 만드는 방법과 js에서 탭 전환 효과를 달성하는 코드를 공유할 것입니다. 여기에는 특정 참조 값이 있으며 관심 있는 친구들이 이를 참조할 수 있습니다.

네이티브 JS를 사용하여 탭 전환 효과를 얻으려면 함수, document.getElementById(), 마우스 이벤트 등과 같은 많은 JavaScript 지식이 필요합니다. 확실하지 않은 경우 PHP에서 관련 기사를 참조할 수 있습니다. 중국어 웹사이트 또는 JavaScript 비디오 튜토리얼을 방문하세요.

예제 설명: 탭 전환 효과를 얻으려면 제어할 각 레이블에 ID를 추가한 다음 마우스 이벤트를 사용하여 ID를 사용하여 각 요소를 얻어 각 요소의 스타일을 제어하는 ​​것을 쉽게 생각할 수 있습니다.

HTML 부분:

<div class="tab-head">
      <h2 id="tab1" onmouseover="changeTab1()" class="selected">按钮1</h2>
      <h2 id="tab2" onmouseover="changeTab2()">按钮2</h2>
      <h2 id="tab3" onmouseover="changeTab3()">按钮3</h2>
</div>
<div class="tab-content">
       <div id="c1" class="show">content1</div>
       <div id="c2">content2</div>
       <div id="c3">content3</div>
</div>

CSS 부분:

*{padding: 0;margin: 0;}
   h2 {               
                width: 150px;
                height: 30px;
                margin: 0 auto;
                float: left;
                text-align: center;
            }            
            .tab-content div{
             width: 148px;
             height: 150px;
             border: 1px solid black;
             display: none;
             position: relative;
             background: pink;
            }   
            #c1{
             position: absolute;
             top: 30px;
             left: 0;            
            }    
            #c2{
             position: absolute;
             top: 30px;
             left: 150px;
            }   
            #c3{
             position: absolute;
             top: 30px;
             left: 300px;
            }                       
            .selected {
                background-color: cornflowerblue;
            }           
            .tab-content .show{
                display: block;
            }

JavaScript 부분:

var tab1 = document.getElementById('tab1'),
            tab2 = document.getElementById('tab2'),
            tab3 = document.getElementById('tab3'),
            c1 = document.getElementById('c1'),
            c2 = document.getElementById('c2'),
            c3 = document.getElementById('c3');
            function changeTab1() {
                tab1.className = 'selected';
                tab2.className = '';
                tab3.className = '';
                c1.className = 'show'
                c2.className = '';
                c3.className = '';
            }
            function changeTab2() {
                tab1.className = '';
                tab2.className = 'selected';
                tab3.className = '';
                c1.className = '';
                c2.className = 'show';
                c3.className = '';
            }
            function changeTab3() {
                tab1.className = '';
                tab2.className = '';
                tab3.className = 'selected';
                c1.className = ''
                c2.className = '';
                c3.className = 'show';
            }

효과는 그림과 같습니다:

이 방법에는 여러 ID를 가진 여러 요소가 있으며 각 탭은 함수를 작성해야 하는데, 탭을 추가하려면 ID와 함수도 추가해야 하는데, 코드가 중복되고 확장이 어렵기 때문에 탭이 많지 않은 상황에는 이 방법이 적합합니다.

위에서는 탭 전환 효과를 얻기 위해 기본 JS를 사용하는 방법을 공유했습니다. 단계는 매우 자세하게 설명되어 있어 초보자도 탭 전환 효과를 얻을 수 있는지 확인할 수 있습니다. 당신에게!

【추천 튜토리얼】

1. JavaScript 중국어 참조 매뉴얼
2. CSS3 비디오 튜토리얼
3.

위 내용은 네이티브 JS를 사용하여 탭 전환 효과를 얻는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!