Comment utiliser JS natif pour obtenir un effet de changement d'onglet (code joint)-js tutoriel-php.cn

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

yulia

Libérer： 2018-10-18 10:15:33

original

2911 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

Partie JavaScript :

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

Copier après la connexion

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

Comment utiliser JS natif pour obtenir un effet de changement donglet (code joint)

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!