ホームページ >ウェブフロントエンド >jsチュートリアル >ネイティブ JS を使用してタブ切り替え効果を実現する方法 (コード添付)

ネイティブ JS を使用してタブ切り替え効果を実現する方法 (コード添付)

yulia
yuliaオリジナル
2018-10-18 10:14:392955ブラウズ

タブといえば誰もがよく知っているはずですが、ネイティブ JS を使用してタブの切り替え効果を実現する方法をご存知ですか?この記事では、タブを作成する方法と、js でタブ切り替え効果を実現するコードを共有します。これには一定の参考値があり、興味のある友人はそれを参照できます。

ネイティブ JS を使用してタブ切り替え効果を実現するには、関数、document.getElementById()、マウス イベントなど、多くの JavaScript の知識が必要です。不明な場合は、PHP の中国語版を参照してください。 Web サイトの関連記事、または 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(&#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;;
            }

効果は図に示すとおりです:

ネイティブ JS を使用してタブ切り替え効果を実現する方法 (コード添付)

このメソッドには、複数の ID を持つ複数の要素があり、タブごとに関数を記述する必要があります。タブを追加する場合は、ID と関数も追加する必要があります。コードが冗長で拡張が簡単ではないため、この方法はタブがあまりない状況に適しています。

上記では、ネイティブ JS を使用してタブ切り替え効果を実現する方法を説明しました。初心者の方は、タブ切り替え効果を実現できるかどうかを自分で試してみてください。記事が役に立ちます!

【推奨チュートリアル】

1. JavaScript 中国語リファレンス マニュアル
2. CSS3 ビデオ チュートリアル ブートストラップ チュートリアル

以上がネイティブ JS を使用してタブ切り替え効果を実現する方法 (コード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。