Question

我有一些标签：

<ul id="tabs">
    <li><a href="#tab-allData">All data</a></li>
    <li><a href="#tab-someOtherData">Some other data</a></li>
    <li><a href="#tab-xyData">xyData</a></li>
</ul>

我想知道点击了哪个标签，并从tab-删除了href前缀。

我试过这个js函数：

$('#tabs').click(function (event) {        
    activeTab = $(this).attr('href').split('-')[1];        
    FurtherProcessing(activeTab);        
});

但是我收到以下错误：

TypeError：$（...）。attr（...）未定义activeTab = $（本）.attr（＆＃39; HREF＆＃39）分割（＆＃39; - ＆＃39）。[1];

Answer 1

<ul id="tabs">
<li><a href="#tab-allData">All data</a></li>
<li><a href="#tab-someOtherData">Some other data</a></li>
<li><a href="#tab-xyData">xyData</a></li>
</ul>

$('#tabs').on("click", "li", function (event) {         
  var activeTab = $(this).find('a').attr('href').split('-')[1];
  FurtherProcessing(activeTab);        
});

演示： http://jsfiddle.net/6dRH6/2/

Answer 2

使用此：attribute-starts-with-selector

$('[href^=tabs]').click(function (event) {        
    activeTab = $(this).attr('href').split('-')[1];        
    FurtherProcessing(activeTab);        
});

从href的html中删除#。

Answer 3

您可以编写li点击事件并获取其锚标记属性：

$('li').click(function (event) {        
    activeTab = $(this).find('a').attr('href').split('-')[1];        
    FurtherProcessing(activeTab);        
});

FIDDLE DEMO

Answer 4

使用更适合您未来编码的课程......

<li><a href="#tab-allData" class="tabs">All data</a></li>
<li><a href="#tab-someOtherData" class="tabs">Some other data</a></li>
<li><a href="#tab-xyData" class="tabs">xyData</a></li>


$('.tabs').click(function (event) {        
    var activeTab = $(this).attr('href').split('-')[1];
        alert(activeTab)
});

工作小提琴链接...... http://jsfiddle.net/JQnE3/

Answer 5

我正在使用jQuery的方法来使用事件委托。这只将一个事件监听器绑定到ul元素，而不是每个选项卡绑定一个。你会注意到on方法中的“a”选择器。这使用事件冒泡来知道它是被点击的ul中的一个标记。

这是最快捷，最有效的方式：

http://jsperf.com/complicated-jquery-selectors

<强> HTML

<ul id="tabs">
    <li><a href="#tab-allData">All data</a></li>
    <li><a href="#tab-someOtherData">Some other data</a></li>
    <li><a href="#tab-xyData">xyData</a></li>
</ul>

<强> JS

$("#tabs").on("click", "a", function (event) {        
    var activeTab = $(this).attr('href').split('-')[1];
    FurtherProcessing(activeTab);        
});

检测用jQuery单击了哪个选项卡

5 个答案: