Question

有人可以帮助我添加一个活动的选择器，以便当单击链接时该链接将获得不同的颜色背景，或者可能只是加粗吗？

<div class="section group">
  <div class="left-nav col span_1_of_2_">
    <ul style="color:#333;">
      <a class="link-leftbar" href="www.test.com"><li>Registration</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Status</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Instruction</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Links</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Policy</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Troubleshooting</li></a>
      <a class="link-leftbar" href="www.test.com"><li>International</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Shipping</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Promotions</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Payment</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Contacts</li></a>
      <a class="link-leftbar" href="www.test.com"><li>Terms</li></a>
    </ul>
  </div>
</div>

Answer 1

这实际上非常容易实现，并且根据您在your other post中的2条评论中提到的内容，您在其中重新加载了每个链接的页面，URL的外观类似于示例“ oneplus “ 链接，例如“ https://www.oneplus.com/support” ，只需一行脚本即可设置。

只需检测页面何时加载（.ready()），即可获取当前的window.location并使用其pathname属性。

结合属性选择器attribute="value"，然后可以向您的链接添加一个类，这是推荐的方法，下面是它在代码中的显示方式

$( document ).ready(function() {

  $('.link-leftbar[href$="' + window.location.pathname + '"]').addClass('active');

});

在上面，我使用了结尾为（$）选择器[attr$="value"]，但是如果您的 url 变得更复杂，则会有更多的变体，您可以在此链接Attribute selectors上检出它们。

由于每次页面加载时都会调用此函数，因此它也可以刷新页面。

例如，如果您要开始使用Ajax加载内容，只需执行此行，它将设置您的活动链接。

$('.link-leftbar[href$="' + window.location.pathname + '"]').addClass('active');

这是一个示例，在该示例中，我手动设置了网址，并且还演示了如何更改内联CSS（如果出于任何原因而无法使用类）。

还请注意，由于li包裹在任何其他元素中但作为ul的子元素是无效的，因此我更改了ul / {{1 }}到以下示例中的li / div，并添加了其他样式，以便链接可以垂直堆叠并包含项目符号。

堆栈片段

span

var window_location = new URL("http://www.test.com/support/international");

$(document).ready(function() {

  // using a class, recommended
  $('.link-leftbar[href$="' + window_location.pathname + '"]').addClass('active');

  // change inline CSS, if you can't use classes
  $('.link-leftbar[href$="' + window_location.pathname + '"]').css('color', 'darkblue');

});

.active {
  font-weight: bold;
}

/*  additional styling -  */
.link-leftbar span {           /*  - stack links vertically  */
  display: block;
}
.link-leftbar span::before {   /*  - add a bullet to each  */
  content: '•';
  padding: 0 10px 0 25px;
  display:inline-block;
}

如何向此代码段添加活动选择器

1 个答案: