Comment utiliser JS natif pour obtenir un effet de changement d'onglet (code joint)

En parlant d'onglets, tout le monde devrait les connaître, mais savez-vous comment utiliser le JS natif pour obtenir l'effet de changement d'onglets ? Cet article partagera avec vous comment créer des onglets et le code permettant d'obtenir un effet de changement d'onglet dans js. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

L'utilisation de JS natif pour obtenir l'effet de changement d'onglet nécessite de nombreuses connaissances en JavaScript, telles que : la fonction, le document.getElementById(), les événements de souris, etc. Si vous n'êtes pas sûr, vous pouvez vous référer au PHP Site Web chinois Articles connexes, ou visitez le Tutoriel vidéo JavaScript.

Description de l'instance : pour obtenir l'effet de changement de tabulation, nous pouvons facilement penser à ajouter un identifiant à chaque étiquette à contrôler, puis à utiliser des événements de souris pour obtenir chaque élément en utilisant l'identifiant, contrôlant ainsi le style de chacun. élément. .

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

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

Partie 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';
            }

L'effet est tel qu'illustré dans l'image :

Dans cette méthode, il y a plusieurs éléments avec plusieurs ID, et une fonction doit être écrite pour chaque onglet. Si vous souhaitez ajouter un onglet, vous. Il faut également ajouter l'ID et la fonction, le code est redondant et pas facile à développer, cette méthode convient donc lorsqu'il n'y a pas beaucoup d'onglets.

Ce qui précède vous a expliqué comment utiliser JS natif pour obtenir l'effet de changement d'onglet. Les étapes sont très détaillées. Les débutants peuvent l'essayer par eux-mêmes pour voir s'ils peuvent obtenir l'effet de changement d'onglet. l'article vous sera utile.

【Tutoriels recommandés】

1. Manuel de référence en chinois JavaScript
2 Tutoriel vidéo CSS3
3. tutoriel bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!