使用jQuery和Twitter Bootstrap查找活动选项卡
我一直在绞尽脑汁想了一会儿，我想知道有没有人知道如何find活动选项卡，使用jQuery和Twitter的Bootstrap。 从URL中抽取散列不是我的第一select，我在<a>链接中使用data-toggle属性，因此不需要生成URL散列。
任何见解？ 以下是我的标记示例：
<ul class="nav nav-list" id="sampleTabs"> <li><a href="#example" data-toggle="tab">Tab 1</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="example"> Example Tab </div> </div> <script> $('#sampleTabs a:first').tab('show'); </script>
我打开任何build议 – 使用PHP会话，JS cookie等
编辑：这是真正的问题。 我有一个使用PHP的分页系统，所以当一个页面号码或next / prev箭头被点击，它将重新加载页面。 这就是为什么我需要在加载下一页之前find活动选项卡，因为我只是将它传递到URL或会话等。
Twitter Bootstrap将active类分配给代表活动选项卡的li元素：
$("ul#sampleTabs li.active")
另一种方法是绑定每个选项卡的shown事件，并保存活动选项卡：
var activeTab = null; $('a[data-toggle="tab"]').on('shown', function (e) { activeTab = e.target; })
这里是需要Boostarp 3解决scheme的人的答案。
在bootstrap 3中，在下一行使用“shown.bs.tab”而不是“shown”
// tab $('#rowTab a:first').tab('show'); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { //show selected tab / active console.log ( $(e.target).attr('id') ); });
首先，您需要删除数据切换属性。 我们将使用一些JQuery，所以确保你包含它。
<ul class='nav nav-tabs'> <li class='active'><a href='#home'>Home</a></li> <li><a href='#menu1'>Menu 1</a></li> <li><a href='#menu2'>Menu 2</a></li> <li><a href='#menu3'>Menu 3</a></li> </ul> <div class='tab-content'> <div id='home' class='tab-pane fade in active'> <h3>HOME</h3> <div id='menu1' class='tab-pane fade'> <h3>Menu 1</h3> </div> <div id='menu2' class='tab-pane fade'> <h3>Menu 2</h3> </div> <div id='menu3' class='tab-pane fade'> <h3>Menu 3</h3> </div> </div> </div> <script> $(document).ready(function(){ // Handling data-toggle manually $('.nav-tabs a').click(function(){ $(this).tab('show'); }); // The on tab shown event $('.nav-tabs a').on('shown.bs.tab', function (e) { alert('Hello from the other siiiiiide!'); var current_tab = e.target; var previous_tab = e.relatedTarget; }); }); </script>
