<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script> </head> <body> <div class="out"> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#a1" data-toggle="tab">菜單1</a> </li> <li> <a href="#a2" data-toggle="tab">菜單2</a> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="a1"> <div>菜單1</div> </div> <div class="tab-pane fade in" id="a2"> <div>菜單2</div> </div> </div> </div> <div class="out"> <ul id="myTab1" class="nav nav-tabs"> <li class="active"> <a href="#a1" data-toggle="tab">菜單3</a> </li> <li> <a href="#a2" data-toggle="tab">菜單4</a> </li> </ul> <div id="myTabContent1" class="tab-content"> <div class="tab-pane fade in active" id="a1"> <div>菜單3</div> </div> <div class="tab-pane fade in" id="a2"> <div>菜單4</div> </div> </div> </div> <script>
//下面的方法解決了這個問題 $(function () { $('ul.nav.nav-tabs li a').on('click',function () { console.log($(this).attr('href')); $(this).parents('div.out').find('li').removeClass('active'); $(this).parent('li').addClass('active'); $(this).parents('div.out').find('div.tab-pane').removeClass('active'); $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active'); }) })
//若不加入以上代碼 在點擊菜單4的時候，並不能實現內容切換 </script> </body> </html>
錯誤顯示，點擊菜單時只會查找a標簽的href對應的tab-content下的id元素（查找修改第一個匹配的元素的class）
示例：（未修改之前bug分析）
初始界面
初始代碼
點擊菜單1，2無問題。
點擊菜單2后：
點擊菜單4：（bug要出現咯）
界面
如上，點擊菜單4后，第一個div.out下面的div#a1的內容隱藏了，菜單2的內容顯示
代碼：
在點擊了菜單4之后繼續點擊菜單3，會發現 界面如下：
這次打開了菜單1的內容，原因和上面一樣，查找了頁面中的第一個a1
總的來說，在點擊菜單3和菜單4的時候第二個div.out里面的div#myTabContent1的內容一直沒有變化。（誰讓它們排行老二呢……）
其實在編碼的時候還是要保證id的唯一性的，在整個頁面的唯一性。但是有的時候，還是避免不了id重復，這個時候我們就需要區分id所在的塊咯。
下面的代碼我就是類似的思路啦。
$(function () {
$('ul.nav.nav-tabs li a').on('click',function () {
console.log($(this).attr('href'));
$(this).parents('div.out').find('li').removeClass('active');
$(this).parent('li').addClass('active');
$(this).parents('div.out').find('div.tab-pane').removeClass('active');
$(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');
})
})