檢測用jQuery單擊了哪個選項卡

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>

我想識別單擊了哪個選項卡，並從href刪除了tab-前綴。

我試過這個js函數：

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

但是我收到以下錯誤：

TypeError：$（...）。attr（...）未定義activeTab = $（this）.attr（'href'）。split（' - '）[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 click事件並獲得它的錨標記屬性：

$('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);        
});