• <xmp id="wgksg"><samp id="wgksg"></samp>
  • <blockquote id="wgksg"></blockquote>
  • 400-650-7353

    精品課程

    您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】如何實現網頁中常見的切換效果

    【Web前端基礎知識】如何實現網頁中常見的切換效果

    • 發布: Web前端培訓
    • 來源:Web前端干貨資料
    • 2020-11-25 11:26:42
    • 閱讀()
    • 分享
    • 手機端入口

    在頁面中tab切換非常的常見,我們先來看下網站中tab切換的實際案例。

    我們來做一個簡單的tab切換的案例吧~學會了下面的案例,只要通過更改樣式,就可以實現上面實例中的樣子啦~

    一、需求:

    1.三個標題對應三個內容區域。

    2.默認“標題1“文字顏色是紅色,其他標題文字顏色為黑色。

    3.“標題1“對應的”內容1“展示出來,其他兩個內容區域隱藏。

    4.點擊“標題幾“: ”標題幾“的文字顏色是紅色,其他標題顏色為黑色,對應的”內容幾“展示出來,其他內容區域隱藏。

    如圖所示:

    二、樣式和結構:

    我們先寫結構和樣式部分:

    1. <style> 
    2. .on{ 
    3.        /* 讓class名是on的元素,文字變成紅色 */ 
    4.        color: red; 
    5.    } 
    6.    #con div{ 
    7.         width: 200px; 
    8.         height: 200px; 
    9.         border:10px solid orange; 
    10.         /* 讓內容區域都隱藏起來 */ 
    11.          display: none; 
    12.     } 
    13.     #con .active{ 
    14.          /* 讓class名是active的元素顯示出來 */ 
    15.          display: block; 
    16.     } 
    17. </style> 
    18. <body> 
    19.     <div id="btn"> 
    20.         <button class="on">標題1</button> 
    21.         <button>標題2</button> 
    22.         <button>標題3</button> 
    23.     </div> 
    24.     <div id="con"> 
    25.         <div class="active">內容1</div> 
    26.         <div>內容2</div> 
    27.         <div>內容3</div> 
    28.     </div> 
    29. </body> 

    三、按鈕部分分析:

    1.點擊每個按鈕之后所干的事是一樣的,所以我們用for循環寫。

    2.點擊按鈕之后,我們先去掉所有按鈕的class名,這樣所有按鈕里的文字顏色就都是默認的黑色。

    3.然后我們給當前點擊的這個按鈕加上class名是on就可以了,上面樣式里面我們已經定義好了class名是on的元素文字顏色是紅色。

    代碼如下:

    1. for(var i = 0; i < obtn.length; i++){ 
    2. // 點擊按鈕 
    3.    obtn[i].onclick = function(){ 
    4.     for(var j = 0; j<obtn.length; j++){ 
    5.         // 去掉所有按鈕的class名。 
    6.          obtn[j].className = ""
    7.       } 
    8.          // 給當前點擊的這個按鈕加上class名是on 
    9.          this.className = "on"

    四、按鈕當前的索引:

    我們需要定義按鈕當前的索引,點擊第幾個按鈕就把對應索引的第幾個內容展示出來。

    代碼如下:

    1. obtn[i].index = i; 

    當i=0時,btns[0].index就是0;

    當i=1時,btns[0].index就是1;

    當i=0時,btns[2].index就是2。

    五、展示對應索引的內容區域:

    1. 我們需要先把所有內容區域都隱藏,所以我們使用for循環來寫。

    2. 把所有內容區域div的class名去掉就可以了。

    3. 把當前索引對應的內容區域展示出來,只需要把class名active加上就可了,active的樣式我們在上面已經寫過了。

    代碼如下:

    1. //隱藏所有內容區域。 
    2. for(var j = 0; j<ocon.length; j++){ 
    3. ocon[j].className = ''
    4. //當前索引對應的內容展示出來。 
    5. ocon[this.index].className = 'active'

    六、代碼優化:

    我們發現按鈕的長度(obtn.length)和內容的長度(ocon.length)是一樣的,上面我們是用兩個for循環來寫,其實我們可以把代碼優化下,改成用一個for循環就可以了。代碼如下:

    1. for(var j = 0; j<obtn.length; j++){ 
    2. // 去掉所有按鈕的class名。 
    3. obtn[j].className = ""
    4.    //隱藏所有內容區域。 
    5.    ocon[j].className = ''

    七、完整代碼如下:

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4.     <meta charset="UTF-8"> 
    5.     <title>tab切換</title> 
    6.     <style> 
    7.         .on{ 
    8.             /* 讓class名是on的元素,文字變成紅色 */ 
    9.             color: red; 
    10.         } 
    11.         #con div{ 
    12.             width: 200px; 
    13.             height: 200px; 
    14.             border:10px solid orange; 
    15.             /* 讓內容區域都隱藏起來 */ 
    16.             display: none; 
    17.         } 
    18.         #con .active{ 
    19.             /* 讓class名是active的元素顯示出來 */ 
    20.             display: block; 
    21.         } 
    22.     </style> 
    23. </head> 
    24. <body> 
    25.     <div id="btn"> 
    26.         <button class="on">標題1</button> 
    27.         <button>標題2</button> 
    28.         <button>標題3</button> 
    29.     </div> 
    30.     <div id="con"> 
    31.         <div class="active">內容1</div> 
    32.         <div>內容2</div> 
    33.         <div>內容3</div> 
    34.     </div> 
    35.     <script> 
    36.         //獲取到id名是btn的元素。 
    37.         var btn = document.getElementById("btn"); 
    38.         //獲取到btn里面標簽名是button的元素,也就是獲取到3個按鈕。 
    39.         var obtn = btn.getElementsByTagName("button"); 
    40.         //獲取到id名是con的元素。 
    41.         var con = document.getElementById("con"); 
    42.         //獲取到con里面標簽名是div的元素,也就是獲取到3個內容。 
    43.         var ocon = con.getElementsByTagName("div"); 
    44.          
    45.          
    46.         for(var i = 0; i < obtn.length; i++){ 
    47.             //給每個按鈕定義了一個index屬性,這個index是屬于obtn[i]的屬性和方法。 
    48.             obtn[i].index = i; 
    49.             // 點擊按鈕 
    50.             obtn[i].onclick = function(){ 
    51.                 for(var j = 0; j<obtn.length; j++){ 
    52.                     // 去掉所有按鈕的class名。 
    53.                     obtn[j].className = ""
    54.                     //隱藏所有內容區域。 
    55.                     ocon[j].className = ''
    56.                 } 
    57.                 // 給當前點擊的這個按鈕加上class名是on 
    58.                 this.className = "on"
    59.                  
    60.                 //當前索引對應的內容展示出來。 
    61.                 ocon[this.index].className = 'active'
    62.             } 
    63.              
    64.         } 
    65.     </script> 
    66. </body> 
    67. </html> 

    效果圖:

    課程好禮申請領取
    您的姓名
    您的電話
    意向課程
     

    中公優就業

    官方QQ

    掃描上方二維碼或點擊一鍵加群,免費領取價值599元網課,加群暗號:599。 一鍵加群

    >>本文地址:
    注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

    推薦閱讀

    優就業:ujiuye

    關注中公優就業官方微信

    • 關注微信回復關鍵詞“大禮包”,領80G學習資料
    QQ交流群
    領取免費網課
    (加群備注“網站”)
    IT培訓交流群 加入群聊 +
    軟件測試 加入群聊 +
    全鏈路UI/UE設計 加入群聊 +
    Python+人工智能 加入群聊 +
    互聯網營銷 加入群聊 +
    Java開發 加入群聊 +
    PHP開發 加入群聊 +
    VR/AR游戲開發 加入群聊 +
    大前端 加入群聊 +
    大數據 加入群聊 +
    Linux云計算 加入群聊 +
    優就業官方微信
    掃碼回復關鍵詞“大禮包”
    領取80G學習資料

    測一測
    你適合學哪門IT技術?

    1 您的年齡

    2 您的學歷

    3 您更想做哪個方向的工作?

    獲取測試結果
     
    課程資料、活動優惠 領取通道
     
     
    A级毛片毛片免费观看久,A毛看片免费观看视频,毛片曰本女人牲交视频视频