jQuery如果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'沒有#tab的href然后它只返回true並正常跟隨鏈接？

Answer 1

如果你說你不希望處理程序在沒有#tab情況下為鏈接#tab ，那么就不要在第一時間為它分配處理程序。

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

這會將click處理程序分配給除最后一個之外的所有處理程序。

你也可以做更像這樣的事情：

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

要么：

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

Answer 2

要完成patrick dw's列表，通用版本：

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

這將僅影響包含具有以#tab開頭的href的錨點的li nodes

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

您可以使用屬性選擇器僅綁定到目標以字符串#tab開頭的鏈接：

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

這將要求您稍微修改函數的內容，因為上下文將發生變化（從li到a ）。

更多信息，請訪問http://api.jquery.com/attribute-starts-with-selector/

Answer 6

按如下方式更新您的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>