Question

我正在使用javascript激活边栏链接。这是代码。现在，当url为http://localhost:8000/jobs/时，我的链接变为活动状态。但是，当链接为http://localhost:8000/jobs/add/时，该链接将变为无效。我使用的是slice, replace and split，但它适用于http://localhost:8000/jobs，就像这种类型的URL，没有以slash(\)结尾。但是我的每个网址都以斜杠结尾，这就是为什么我添加了具有comment : Customly Added

的那些代码行的原因

var sidebar = $('.sidebar');

//var current = location.pathname.split("/").slice(-1)[0].replace(/^\/|\/$/g, '');

var current = location.pathname;// Customly Added
$('.nav li a', sidebar).each(function() {
  var $this = $(this);
  if (current === "") {
    //for root url
    if ($this.attr('href').indexOf("index.html") !== -1) {
      $(this).parents('.nav-item').last().addClass('active');
      if ($(this).parents('.sub-menu').length) {
        $(this).closest('.collapse').addClass('show');
        $(this).addClass('active');
      }
    }
  } else {
    //for other url

    // if ($this.attr('href').indexOf(current) !== -1) {

    if ($this.attr('href')==current) { // Customly Added
      $(this).parents('.nav-item').last().addClass('active');
      if ($(this).parents('.sub-menu').length) {
        $(this).closest('.collapse').addClass('show');
        $(this).addClass('active');
      }
    }
  }
})

Answer 1

使用正则表达式修剪斜杠（/)。

    var current = location.pathname.replace(/\/+$/, "");
    console.log(current);

Answer 2

<nav>
  <a href="/">home</a>
  <a href="/work">work</a>
</nav>

您可以做的是在页面加载/更改时，可以检查href的路径名，如果为true，则添加一个类

const { children: links } = document.querySelector('nav');

function addActiveClass({ href, classList }) {
  const currentPath = location.pathname.replace(/\/$/, "");

  href ===  currentPath ?
    classList.add('active') :
    classList.remove('active');
}

document.onload = () => Array.from(links).forEach(addActiveClass)

使用Java的活动链接

2 个答案: