bootstrap選項卡：訂閱事件

我對js的瞭解非常有限。我已經閱讀過官方文檔和網上的幾個主題。我仍然有一些問題。我需要以編程方式顯示選項卡，因爲在顯示選項卡時我必須執行一些操作。bootstrap選項卡：訂閱事件

按照Twitter的引導文件，這裏一小塊代碼：

<ul id="tabs" class="nav nav-tabs"> 
     <li><a href="#state">State</a></li> 
     <li><a href="#graph">Graph</a></li> 
     <li><a href="#setup">Setup</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="state" class="tab-pane fade"> 
     </div> 
     <div id="graph" class="tab-pane fade"> 
     </div> 
     <div id="setup" class="tab-pane fade"> 
     </div> 
    </div> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
$('#tabs a').click(function (e) { 
    e.preventDefault(); 
    console.log("Activating a tab"); 
    $(this).tab('show'); 
}) 

$('a[data-toggle="tab"]').on('shown', function (e) { 
    console.log("Tab activated"); 
    e.target // activated tab 
    e.relatedTarget // previous tab 
}) 
</script>

第一個腳本激活每個選項卡 - 和它的工作。第二個應該訂閱'顯示'事件和e.target應該包含激活的標籤的引用。

我得到第一個控制檯消息（「激活選項卡」），但不是第二個。所以我敢打賭，我錯過了正確訂閱該活動的一些信息。

我無法理解的兩個問題。爲了獲得工作，我不能使用js來激活選項卡，而只需依靠引導數據切換項目。另一個奇怪的事情是隻有'秀'事件會觸發，'顯示'不會。你知道爲什麼嗎？

來源

2012-12-14 Mark

你可以編輯你的問題並在那裏添加更新。我已經爲你做了這件事，但未來最好更新你的問題，而不是添加評論，除非回覆給其他用戶 – Eonasdan

您需要將data-toggle="tab"添加到您的鏈接。所以，你的第一部分應該被改寫像下面

<ul id="tabs" class="nav nav-tabs"> 
    <li><a data-toggle="tab" href="#state">State</a></li> 
    <li><a data-toggle="tab" href="#graph">Graph</a></li> 
    <li><a data-toggle="tab" href="#setup">Setup</a></li> 
</ul>

那麼你應該能夠看到你的Tab activated消息在控制檯中。

來源

2013-01-08 21:54:24 zemirco

bootstrap選項卡：訂閱事件

回答

相關問題