jQuery - 查找活动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19015287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Find active tab
提问by TiagoSouEu
I have a list of tabs:
我有一个选项卡列表：
<ul class="tabs">
<li><a data-id="1" href="#">AAA</a></li>
<li><a data-id="2" href="#" class="active">BBB</a></li>
<li><a data-id="3" href="#">CCC</a></li>
</ul>
Then I have a button:
然后我有一个按钮：
<div id="button">Click Me</div>
How can I, when click on the button, access the element that have the class active? I need to be able to get the data-id from the active item.
我如何在单击按钮时访问具有活动类的元素？我需要能够从活动项目中获取数据 ID。
So, something like this... (this doesn't work!)
所以，这样的事情......（这不起作用！）
$("#button").live("click", function(){
var ref_this = $("ul.tabs li a").find(".active");
alert(ref_this.data("id"));
});
回答by Jason P
You already selected the a, and find()searches descendants. Try this instead:
您已选择a, 并find()搜索后代。试试这个：
var ref_this = $("ul.tabs li a.active");
Side note: live()is deprecated as of version 1.7. on()is the new hotness.
旁注：live()从 1.7 版起已弃用。on()是新的热点。
回答by Evets Rezik
Try on instead of live:
试穿而不是现场：
$("#button").on("click", function(){
var ref_this = $("ul.tabs li a").find(".active");
alert(ref_this.data("id"));
});
回答by Utpal Patel
$(document).ready(function () {
$("#tabs").on("click", function (e) {
//debugger
//var ref_this = $("ul.tabs li a.active");
var target = $(e.target).attr("data-id");
if (target != null)
alert(target);
else
alert('There is no active element');
});
});
Here is my TAB list
这是我的 TAB 列表
<ul class="nav nav-tabs" id="gtu-tab">
<li class="active"><a data-id="1" href="#Boys" id="boys-tab" data-toggle="tab">Boys</a></li>
<li><a data-id="2" href="#Girls" id="girls-tab" data-toggle="tab">Girls</a></li>
</ul>
<div id="tabs" class="tab-content">
<div class="tab-pane active" id="Boys">
<p>Hey....</p>
<p>Boys are here</p>
</div>
<div class="tab-pane" id="Girls">
<p>Hey....</p>
<p>Girls are here</p>
</div>
</div>
and button over here
和按钮在这里
<input id="Div1" type="button" value="Click Me"/>
回答by Robin
As the others have already mentioned: since jQuery v1.7 the live() method is deprecated.
正如其他人已经提到的：自 jQuery v1.7 起，live() 方法已被弃用。
This should work:
这应该有效：
$('#button').on('click', function() {
var active_button = $('.tabs li a.active');
});`
回答by deformhead
Be careful, live()jQuerymethod is deprecatedsince 1.7version. You should use on()jQuerymethod instead (on() jquery documentation) and change your CSSselector like this :
请注意，自版本以来不推荐使用live()jQuery方法。您应该改用方法（on() jquery 文档）并像这样更改您的选择器：1.7on()jQueryCSS
$('#button').on('click', function(){
var ref_this = $('ul.tabs li a.active');
alert(ref_this.data('id'));
});
And if the activeclass is optional (0to 1. Not n), you should check if there exists an activeelement for example (just a simple way to do) :
如果active类是可选的（0to 1. Not n），你应该检查是否存在一个active元素，例如（只是一个简单的方法）：
$('#button').on('click', function(){
var ref_this = $('ul.tabs li a.active');
if(ref_this)
alert(ref_this.data('id'));
else
alert('There is no active element');
});
回答by Darshit Gandhi
var activeTab = "AAA";
$("li").click(function(){
activeTab = $(this).text();
});
