页面内的侧导航栏，<a>如果标签位于当前页面上，则将其设置为活动状态

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>

我的客户网页页面看起来像这样：

/bedrockweb/顾客

我想我需要帮助过滤变量路径名以在斜线之后获取URL的末端部分，以便它与每个HREF匹配。

Answer 1

我使用jQuery每个循环来查看导航中每个链接的HREF，并在HREF匹配pathName的情况下添加'Active'类。

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>