So verwenden Sie natives JS, um einen Tab-Switching-Effekt zu erzielen (Code beigefügt)-js-Tutorial-php.cn

So verwenden Sie natives JS, um einen Tab-Switching-Effekt zu erzielen (Code beigefügt)

yulia

Freigeben： 2018-10-18 10:15:33

Original

2952 Leute haben es durchsucht

Apropos Tabs: Jeder sollte damit vertraut sein, aber wissen Sie, wie man mit nativem JS den Wechseleffekt von Tabs erzielt? In diesem Artikel erfahren Sie, wie Sie Tab-Tabs erstellen und wie Sie den Tab-Switching-Effekt in js erzielen. Er hat einen gewissen Referenzwert und interessierte Freunde können darauf verweisen.

Die Verwendung von nativem JS zum Erzielen des Tab-Wechseleffekts erfordert umfangreiche JavaScript-Kenntnisse, z. B.: Funktion, document.getElementById(), Mausereignisse usw. Wenn Sie sich nicht sicher sind, können Sie sich an PHP wenden Chinesische Website Verwandte Artikel oder besuchen Sie JavaScript-Video-Tutorial.

Instanzbeschreibung: Um den Tab-Wechseleffekt zu erzielen, können wir uns leicht vorstellen, jeder zu steuernden Beschriftung eine ID hinzuzufügen und dann Mausereignisse zu verwenden, um jedes Element mithilfe der ID abzurufen und so den Stil jedes einzelnen Elements zu steuern Element.

HTML-Teil:

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

Nach dem Login kopieren

CSS-Teil:

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

Nach dem Login kopieren

JavaScript-Teil:

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

Nach dem Login kopieren

Der Effekt ist wie im Bild gezeigt:

So verwenden Sie natives JS, um einen Tab-Switching-Effekt zu erzielen (Code beigefügt)

Bei dieser Methode gibt es mehrere Elemente mit mehreren IDs, und für jede Registerkarte muss eine Funktion geschrieben werden. Wenn Sie Registerkarten hinzufügen möchten, müssen Sie auch IDs und Funktionen hinzufügen. Der Code ist redundant und nicht einfach zu erweitern, daher eignet sich diese Methode für Situationen, in denen nicht viele Registerkarten vorhanden sind.

Das Obige hat Ihnen gezeigt, wie Sie mit nativem JS den Tab-Switching-Effekt erzielen können. Die Schritte sind sehr detailliert, um zu sehen, ob sie den Tab-Switching-Effekt erzielen können Der Artikel wird Ihnen hilfreich sein.

【Empfohlene Tutorials】

1. JavaScript-Referenzhandbuch für Chinesisch
2. CSS3-Video-Tutorial
3 Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie natives JS, um einen Tab-Switching-Effekt zu erzielen (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!