<div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價（50000）</li><li>手機社區</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容</div><div class="item">規格與包裝模塊內容</div><div class="item">售后保障模塊內容</div><div class="item">商品評價（50000）模塊內容</div><div class="item">手機社區模塊內容</div></div></div> <style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style> <script>// 點擊修改內容以及樣式// 點擊li添加類名current，其他li不準加這個類名// 并且對應的div要顯示，其他的div要隱藏$('.tab_list li').click(function () {// 1、點擊哪個li給哪個li添加類名，其他的移除類名$(this).addClass('current').siblings().removeClass('current');// 2、顯示對應的div，其他div隱藏// 獲取索引值var index = $(this).index();// 根據index查找對應div$('.tab_con div').eq(index).show().siblings().hide();});</script>

注意jQuery等案例，需要引入jquery編輯文件

<script src="jquery.min.js"></script>

實現效果：

總結

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

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