jQuery si href attr

Question

J'ai cette structure html:

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

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

Mais ce que je veux faire est si le 'li' est cliqué ne pas un href de #tab alors il renvoie juste vrai et suit le lien comme d'habitude?

Answer 1

Si vous dites que vous ne voulez pas que le gestionnaire déclenche le lien sans #tab, ne lui attribuez tout simplement pas le gestionnaire.

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

Ceci affectera le gestionnaire de clic à tous sauf au dernier.

Vous pouvez également faire quelque chose comme ceci:

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

ou:

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

Answer 2

Si vous avez plusieurs liens externes vous pouvez utiliser ceci:

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 3

Pour compléter patrick dw's liste, la version générique:

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

Cela seul effet li nodes qui contiennent un point d'ancrage avec un href qui commence par #tab

Answer 4

Vous pouvez utiliser les sélecteurs d'attribut pour lier uniquement les liens dont la cible commence par la chaîne #tab:

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

Cela vous demanderait de modifier légèrement le contenu de votre fonction, car le contexte aura changé (du li au a).

Plus sur http://api.jquery.com/attribute-starts-with-selector/

Answer 5

Mettez à jour votre HTML comme suit que la syntaxe est un peu hors:

1. Vous ne pouvez pas avoir des éléments de bloc à l'intérieur des éléments en ligne.
2. <img></img> doit être <img /> et avoir un attribut alt même s'il est vide.

3. Vous pouvez modifier votre liste non ordonnée en une liste ordonnée pour informer l'utilisateur du nombre d'onglets disponibles. (Vous marquez déjà le href = "tab1 ... tab2" donc il y a déjà une commande à elle)

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

Answer 6

$("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" 

});