3

I have some tabs:

<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>

I want to recognize which tab was clicked and remove the tab- prefix from the href.

I have tried this js function:

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

but I get the following error:

TypeError: $(...).attr(...) is undefined activeTab = $(this).attr('href').split('-')[1];

1
  • You need to put var activeTab = instead of just activeTab =. And, indeed, your selector is wrong, $('#tabs') doesn't match.
    – Roy Dictus
    Jun 5, 2014 at 12:01

5 Answers 5

7
<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);        
});

Demo: http://jsfiddle.net/6dRH6/2/

2
  • Out of all the answers on this page this is the least efficient! The OP is using an ID of tabs. Why not select from this and then find the "a" tags inside? It's still an order of magnitude faster than this which targets all unordered lists on a page that contains a tags. Or better yet, use event delegation which is more efficient again. See this jsperf for results: jsperf.com/complicated-jquery-selectors Jun 5, 2014 at 12:27
  • No problem, Your update though is still 55% slower than using an ID and event delegation. See the updated perf. try: $('#tabs').on("click", "a", function - instead. Jun 5, 2014 at 12:38
2

you can write li click event and get its anchor tag attribute:

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

FIDDLE DEMO

2

Use this: attribute-starts-with-selector

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

And remove # from html of href.

1

Use a class its better for your future coding...

<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)
});

Working fiddle link... http://jsfiddle.net/JQnE3/

1

I'm using jQuery's on method to make use of event delegation. This only binds one event listener to the ul element instead of one for each tab. You will notice the "a" selector in the on method. This makes use of event bubbling to know that it was the a tag inside the ul that was clicked.

This is the fastest and most efficient way:

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);        
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.