Question

我在同一页面上有三个单独的链接。

基于当前页面的URL还考虑了HASH（＃），我想使用jQuery代码在LI和Anchor标记中添加类。

使用下面的代码，但不起作用。

<ul class="menu">
<li><a href="https://example.com/faq">faqs</a></li>
<li><a href="https://example.com/assistance#pay_navi_method">payment methods</a></li>
<li><a href="https://example.com/assistance#service_center">service centre</a></li>
<li><a href="https://example.com/assistance#cust_delight">hotline</a></li>
<li><a href="https://example.com/assistance">assistance</a></li>
</ul>

尝试1：

jQuery(window).on('hashchange', function() {
  var hash = window.location.hash;
  jQuery('a').closest('li').removeClass('called');
  jQuery('a[href="' + hash + '"]').closest('li').addClass('called');
});

尝试2：

jQuery(function() {
  jQuery('ul.menu li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('called');
});

Answer 1

您可以在没有jQuery的情况下执行此操作，而只需使用CSS选择器，如下所示：

a[href$="#cust_delight"] { color: red; }

使用a[href$=""]选择器，可以根据锚点href值的末尾来匹配元素。

在您的示例中，您以^开头，而其他人错过了-因此选择器不匹配

Answer 2

您可以这样做：

<div id="foo">
    <a href="#foo">Foo</a>
</div>

<script>
    jQuery(document).ready(function()
    {
        $(window).on('hashchange', function()
        {
            var hash = window.location.hash.substr(1);
            $('a[href="#'+ hash +'"]').closest('div').css('background', 'red')
        });
    })
</script>

这是该功能的示例-调整以适合您的代码。

基本上是在页面加载时发生的-您的网址很可能不会包含哈希值（除非用户已经在page.php＃location上）。

您的第一次尝试非常接近，我只是认为您如何获得哈希值是您的错。

Answer 3

您可以按如下所示添加带有url的类

// Fetch current URL
var current_location = window.location.href;

// iterate each <a> of li to add class 'active' to matched element.
$(".menu li").each(function() {
  if ($(this).children("a").attr("href") == current_location) {
    $(this).addClass("active");
    $(this).children("a").addClass("active");
  }
})

使用哈希时如何为当前页面添加任何特定的类

3 个答案: