效果如下:

代碼思路:

? ?上面的選項卡,點擊某一個,當前這一個會變成粉紅色,其他不變(排他思想) 修改類名的方式

? ?下面的內容會隨著上面的選項卡變化,所以下面的模塊變化要寫到點擊事件里面

? ?下面的模塊顯示內容和上面的選項卡一一對應,相匹配

html代碼:

<div class="container"><ul class="header"><li class="on"><a href="#">雞湯</a></li><li><a href="#">排骨</a></li><li><a href="#">雞翅</a></li></ul><div class="list"><div class="con"><div class="clearfix"><p>1、烏雞宰殺洗凈，放沸水中焯水，除去血水;2、把烏雞、料酒、香蔥、生姜放入砂鍋內，用大火燒開后，改小火燉2小時，加入精鹽、 味精即可</p></div><div class="clearfix"><p>1、雞去皮洗凈，出水，備用。2、陳皮浸軟去果瓤。3、鍋中放適量的水，水滾后放入雞及放入其它材料，煲1小時45分鐘，放入桂元肉煲十五分鐘，即可調味飲用。</p></div><div class="clearfix"><p>1、雞肉切絲(順紋切)，青椒和紅、白蘿卜分別切絲。2、雞絲加入精鹽、雞蛋、料酒、濕淀粉上漿，入油鍋中滑散斷生。3、炒鍋上火，淋少許油，加入姜絲稍煸，青椒絲、蘿卜絲炒制加鹽、味精、放少量水，勾芡，上明油，倒入雞絲翻勺即成。</p></div></div><div class="con"><div class="clearfix"><p>2、把水燒開，將排骨放進沸水煮1分鐘，倒掉血水3、鍋中放入少量火麻油，燒至冒煙，放入姜、大蔥爆香，再把排骨放入，翻炒片刻，加入適量熱水。4、.放入調料酒、鹽、糖和醬油，大火燒20-30分鐘。上碟再曬上蔥花就色香味俱全了。</p></div><div class="clearfix"><p>2、姜鼓洗干凈，用菜刀刀背壓成粉碎狀，這樣排骨比較容易入味;3、取少許沙姜、生姜、蒜子分別切碎，和排骨、姜鼓、少許醬油、少許花生油、少許鹽一起腌制15分鐘;4、放入蒸籠內蒸20分鐘即可。</p></div><div class="clearfix"><p>1、將陳皮泡水10分鐘;2、將肋排切成小塊，飛水;3、陳皮水加入排骨、醬油、少許鹽、生粉一起腌制1小時;4、用中火炸至金黃色起鍋，瀝油就可以吃了。</p></div></div><div class="con"><div class="clearfix"><p>2、起鍋倒入火麻油，倒入雞翅，雞翅煎汁變色。3、雞翅煎汁變色，倒入準備好的蒜、姜、辣椒，翻炒。4、倒入輔料之后，翻炒幾下，就可以倒入可樂了，要注意，可樂不要到太多，剛好改過雞翅就可以了。5、大火燜10鐘后収汁即可出鍋。</p></div><div class="clearfix"><p>1、雞翅中節洗凈，用少許老抽王腌約30分鐘，紅椒、生姜切片，蔥切段。2、燒鍋下油，油溫150度時下入雞翅，炸至金黃至八成熟撈起待用。</p></div><div class="clearfix"><p>雞翅用腌料腌制一夜，準備一個鍋，里面鋪錫紙，放米、茶葉、糖和薄荷，架上烤架，碼上腌好的雞翅，開大火，直到糖開始變紅并冒煙。</p></div></div></div></div>

css代碼:

* {margin: 0;padding: 0;}ul {list-style: none;}a {text-decoration: none;}.container {width: 600px;margin: 0 auto;}.container .header {width: 600px;height: 40px;line-height: 40px;background-color: #fff;}.container .header li {float: right;margin-left: 5px;width: 100px;text-align: center;border: 1px solid #6c6c6c;background-color: blanchedalmond;}a {color: #222222;}.container .header li.on {background-color: pink;}.container .list {width: 600px;box-shadow: 0 0 0 2px #999 inset;}.container .list .con {display: none;padding: 10px;}.container .list .con:nth-of-type(1) {display: block;}.clearfix::after {display: block;content: "";clear: both;}p {margin: 10px;width: 470px;float: left;}

script代碼:?

//獲取元素var lis = document.querySelectorAll(".header li");var divs = document.querySelectorAll(".list .con");for (let i = 0; i < lis.length; i++) {lis[i].onclick = function () {for (var j = 0; j < lis.length; j++) {lis[j].className = "";divs[j].style.display = "none";}this.className = "on";divs[i].style.display = "block";};}

總結

以上是生活随笔為你收集整理的javascript小案例-----tab栏切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。