jQuery if href attr

Question

I have this html structure:

<ul class="tabs">
            <li><a href="#tab1"><h3>Sound</h3><img class="servicesIcon" src="img/micro.png"></img></a></li>
            <li><a href="#tab2"><h3>Lighting</h3><img class="servicesIcon" src="img/light.png"></img></a></li>
            <li><a href="#tab3"><h3>Staging</h3><img class="servicesIcon" src="img/barstool.png"></img></a></li>
            <li><a href="#tab4"><h3>Sales</h3><img class="servicesIcon" src="img/info.png"></img></a></li>
            <li><a href="http://www.example.co.uk/" target="_BLANK"><h3>Hire Guide</h3><img class="servicesIcon" src="img/info.png"></img></a></li>
        </ul>

and this jQuery:

$("ul.tabs li").click(function() {



                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
            });

But what i want to do is if the 'li' is clicked that doesn't have a href of #tab then it just returns true and follows the link as normal?

Answer 1

If you're saying that you don't want the handler to fire for the link without a #tab , then just don't assign the handler to it in the first place.

$("ul.tabs li").slice(0,-1).click(function() {
    // and so on

This will assign the click handler to all but the last one.

You could also do something more like this:

$("ul.tabs li:not(:last)").click(function() {
    // and so on

or:

$("ul.tabs li:not(:last-child)").click(function() {
    // and so on

Answer 2

To complete patrick dw's list, the generic version:

$('ul.tabs li:has(a[href^=#tab])').click(function() {
});

This will only effect li nodes which contain an anchor with a href that begins with #tab

Answer 3

$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    $(".tab_content").hide();

    var takE = $(this).attr('href'); //select the href from clicked element
    var swap = takE.replace('#',''); //strip it, if #tab1 clicked result = 'tab1'
    $('#' + swap).show(); // this will show clicked element like id="tab1"

});

Answer 4

If you have multiple external links you could use this:

var activeTab = $(this).find("a").attr("href");
if(activeTab.substr(0,1) == '#'){ //if link starts with # - do fade, else treat as actual link.
  $(activeTab).fadeIn();
  return false;
}
else
  return true;

Answer 5

You can use attribute selectors to bind only to the links whose target starts with the string #tab :

$("ul.tabs a[href^=#tab]").click(function() {
    //...
});   

This would require you to modify the contents of your function slightly, because the context will have changed (from the li to the a ).

More at http://api.jquery.com/attribute-starts-with-selector/

Answer 6

Update your HTML as follows as the syntax is a little off :

1. You cannot have block elements inside inline elements.
2. <img></img> should be <img /> and have an alt attribute even if it is blank.

3. You can change your unordered list to an ordered list to let a user know how many tabs there are. (You are already marking up the href="tab1...tab2" so there is already an order to it)

   <ol class="tabs"> <li><h3><a href="#tab1">Sound<img alt="" class="servicesIcon" src="img/micro.png" /></a></h3></li> </ol>