<div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規(guī)格與包裝</li><li>售后保障</li><li>商品評(píng)價(jià)（50000）</li><li>手機(jī)社區(qū)</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內(nèi)容</div><div class="item">規(guī)格與包裝模塊內(nèi)容</div><div class="item">售后保障模塊內(nèi)容</div><div class="item">商品評(píng)價(jià)（50000）模塊內(nèi)容</div><div class="item">手機(jī)社區(qū)模塊內(nèi)容</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>// 點(diǎn)擊修改內(nèi)容以及樣式// 點(diǎn)擊li添加類名current，其他li不準(zhǔn)加這個(gè)類名// 并且對(duì)應(yīng)的div要顯示，其他的div要隱藏$('.tab_list li').click(function () {// 1、點(diǎn)擊哪個(gè)li給哪個(gè)li添加類名，其他的移除類名$(this).addClass('current').siblings().removeClass('current');// 2、顯示對(duì)應(yīng)的div，其他div隱藏// 獲取索引值var index = $(this).index();// 根據(jù)index查找對(duì)應(yīng)div$('.tab_con div').eq(index).show().siblings().hide();});</script>

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

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

實(shí)現(xiàn)效果：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。