javascript - 页面内的侧导航栏，如果 标签在当前页面上，则将其设置为 active

Question

我正在尝试在我的一个页面中添加一个侧边导航栏，该导航栏会转到其他页面。我目前正在使用边栏，想知道是否可以添加一个与您当前所在页面相对应的事件类，但我似乎无法将事件属性添加到该类中。

我的侧边导航 HTML 代码在一个 jspf 文件中，并包含在主 jsp 中。

这是侧边导航 HTML 代码:

$(function() {
  setActive();
});

function setActive() {
  var pathname = window.location.pathname;
  $('.sideNav > ul > li > a[href="' + pathname + '"]').addClass('active');
  alert(pathname);
}

.sideNav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #333;
  display: block;
}

.sideNav a:active {
  color: #4080ff;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sideNav">
  <ul>
    <li><a style="font-size: 27px; color: #4080ff;">Customers</a></li>
    <li><a href="about">Why Us</a></li>
    <li><a href="customers">Customers</a></li>
    <li><a href="documents">Documents</a></li>
  </ul>
</div>

我的客户页面 url 如下所示:

/BedrockWeb/customers

我想我需要帮助来过滤变量路径名以仅获取斜杠后的 url 的结尾部分，以便它与每个 href 匹配。

Answer 1

我使用 jQuery each 循环查看导航中每个链接的 href，如果 href 与路径名匹配，则添加“事件”类。

function setActive() {
  let pathname = window.location.pathname.split('/').pop();
  // for testing lets set pathname = documents
  pathname = 'documents';
  
  $( '.sideNav > ul > li > a' ).each( function() {
    if ( $( this ).attr( 'href' ) == pathname ) {
      $( this ).addClass( 'active' );
    }
  });

}

setActive();

.sideNav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #333;
  display: block;
}

.sideNav a.active {
  color: #4080ff;
  font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sideNav">
  <ul>
    <li><a style="font-size: 27px; color: #4080ff;">Customers</a</li>
    <li><a href="about">Why Us</a></li>
    <li><a href="customers">Customers</a></li>
    <li><a href="documents">Documents</a></li>
  </ul>
</div>