将所选类添加到库项目（Jquery）

Question

我在这样的网页上列出了一堆画廊。

我需要jQuery代码来检查URL并基于此将选定的类添加到选项卡项目，无论是芝加哥婚礼还是帐篷婚礼......同时将选定的类添加到库项目中，以便我可以设置其样式背景不同。

以下是一个图库标签的示例代码：

<span class="carousel-link" data-tabid="carousel1">CHICAGO WEDDINGS</span>

以下是一个图库项目的示例代码：

<figure id="attachment_11004" style="width: 180px;" class="wp-caption alignnone">
    <a title="Destination Weddings - Anguilla" href="/gallery/destination-weddings/anguilla.html">
        <img class="galleryImg alignleft size-full wp-image-11004" src="/wp-content/uploads/2014/12/destination-weddings-anguilla.jpg" alt="Destination Weddings - Anguilla" width="180" height="270">
    </a>
    <figcaption class="wp-caption-text">
        <a title="Destination Weddings - Anguilla" href="/gallery/destination-weddings/anguilla.html">Anguilla</a>
    </figcaption>
</figure>

我把它放在一起，但它不起作用的原因？

$(function() {
 var url = document.location.href;
    if (url.indexOf("chicago-weddings") > -1) {
    $(".carousel-link").removeClass("carousel-link-active");
    $(this).addClass("carousel-link-active");
    var tabid = $(this).data("tabid");
    $(".carousel-tab").fadeOut();
    $("#" + tabid).fadeIn();
    $(window).trigger("resize");
    $('#carousel1').addClass('selected');
}
 else if (url.indexOf("tented-weddings") > -1) {
    $(".carousel-link").removeClass("carousel-link-active");
    $(this).addClass("carousel-link-active");
    var tabid = $(this).data("tabid");
    $(".carousel-tab").fadeOut();
    $("#" + tabid).fadeIn();
    $(window).trigger("resize");
    $('#carousel2').addClass('selected');
}
 else if (url.indexOf("destination-weddings") > -1) {
    $(".carousel-link").removeClass("carousel-link-active");
    $(this).addClass("carousel-link-active");
    var tabid = $(this).data("tabid");
    $(".carousel-tab").fadeOut();
    $("#" + tabid).fadeIn();
    $(window).trigger("resize");
    $('#carousel3').addClass('selected');
}
 else if (url.indexOf("parties") > -1) {
    $(".carousel-link").removeClass("carousel-link-active");
    $(this).addClass("carousel-link-active");
    var tabid = $(this).data("tabid");
    $(".carousel-tab").fadeOut();
    $("#" + tabid).fadeIn();
    $(window).trigger("resize");
    $('#carousel4').addClass('selected');
}
 else if (url.indexOf("events") > -1) {
    $(".carousel-link").removeClass("carousel-link-active");
    $(this).addClass("carousel-link-active");
    var tabid = $(this).data("tabid");
    $(".carousel-tab").fadeOut();
    $("#" + tabid).fadeIn();
    $(window).trigger("resize");
    $('#carousel5').addClass('selected');
}
else {
    $(".carousel-link").removeClass("carousel-link-active");
    $(this).addClass("carousel-link-active");
    var tabid = $(this).data("tabid");
    $(".carousel-tab").fadeOut();
    $("#" + tabid).fadeIn();
    $(window).trigger("resize");
    $('#carousel1').addClass('selected');
    }
});

Answer 1

研究以下示例并根据您的需要进行调整。

$(document).ready(function() {
  $('span:contains(Tented)').addClass('highlight'); 

// The above adds adds the given class when Span contains the word Tented //
  
  });

span  {
  display: block;
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: bold;
  }


.highlight {
  color: red;
  font-size: 72px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="carousel-link" data-tabid="carousel1">Chikago Wedding</span>
<span class="carousel-link" data-tabid="carousel1">Tented Weddings</span>

要检查页面地址，请执行以下操作

// Current URL hihglighter code starts here 
$(function() {
 var url = document.location.href;
    if (url.indexOf("about") > -1) {
    $('ul li:contains("About")').addClass('this-class');
}
 else if (url.indexOf("index") > -1) {
    $('ul li:contains:(Home)').addClass('home-tab');
}

else {
       // do what you like here
    }
});

注意：包含区分大小写。