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> 

效果圖:

學習疑問申請解答
您的姓名
您的電話
意向課程
 

中公優就業

IT小助手

掃描上方二維碼添加好友,請備注:599,享學習福利。

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

推薦閱讀

優就業:ujiuye

關注中公優就業官方微信

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

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

1 您的年齡

2 您的學歷

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

獲取測試結果
 
課程資料、活動優惠 領取通道
 
 
聚星注册-聚星登陆