jQuery if href attr

Question

У меня есть эта структура 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>

и этот 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;
            });

Но что я хочу сделать, так это если щелкнуть 'li', который не имеет href #tab, тогда он просто возвращает true и следует по ссылке как обычно?

Answer 1

Для заполнения списка patrick dw's, общая версия:

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

Это повлияет только на li nodes, который содержит якорь с href, который начинается с #tab

Answer 2

Если вы говорите, что не хотите, чтобы обработчик запускал ссылку без #tab, просто не назначайте ему обработчик.

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

Это назначит обработчик щелчка всем, кроме последнего.

Вы также можете сделать что-то более похожее на это:

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

или

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

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

Если у вас есть несколько внешних ссылок, вы можете использовать это:

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

Обновите ваш HTML следующим образом, так как синтаксис немного отклонен:

1. Вы не можете иметь блочные элементы внутри встроенных элементов.
2. <img></img> должно быть <img /> и иметь атрибут alt, даже если оно пустое.

3. Вы можете изменить неупорядоченный список на упорядоченный список, чтобы пользователь знал, сколько существует вкладок. (Вы уже помечаете href = "tab1 ... tab2", так что заказ уже есть)

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

Answer 6

Вы можете использовать селекторы атрибутов для привязки только к ссылкам, цель которых начинается со строки #tab:

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

Это потребует от вас незначительного изменения содержимого вашей функции, поскольку контекст будетизменились (с li на a).

Еще на http://api.jquery.com/attribute-starts-with-selector/