一种方法是监听
假设我们在这个页面的底部有HTML代码片段。
第一种选择；所有"；具有"；活动的"；班假设现在你点击与"；新闻"然后转到那个页面。
现在我想添加"；活动的"；类到"；a"；标签"；新闻"在打开的页面中。
.page-nav-section {
padding: 4rem 0 1rem 0;
}
.page-nav-section ul li {
margin-left: 3rem;
list-style: none;
}
.d-flex.align-items-center {
display: flex;
}
.page-nav-section ul li a.active {
color: #7F1730;
border-bottom: 2px solid #7F1730;
}
.page-nav-section ul li a {
font-size: 15px;
font-weight: 600;
padding: 0.2rem 0.5rem;
}
.page-nav-section ul li a:not(.active):after {
content: "";
display: block;
border-bottom: 2px solid #7F1730;
width: 0;
position: relative;
right: 0;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.page-nav-section ul li:hover a:not(.active):after {
width: 100%;
color: #7F1730;
}
.page-nav-section ul li:hover a:not(.active) {
color: #7F1730;
}
a{
text-decoration: none ;
color: #555;
}<div class="page-nav-section section hide-md-and-down">
<ul class="d-flex align-items-center">
<li><a href="#" class="active">All</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">News</a></li>
</ul>
</div>click事件，删除所有a元素上的active类，然后在当前元素上添加active类。
如果要将active传递到新打开的页面，则需要传递href属性上的参数，并在新打开的页上检查它是否包含指定的参数。
$(function(){
$('ul > li > a').on('click',function(){
$('li > a').removeClass('active');
$(this).addClass('active');
})
}).page-nav-section {
padding: 4rem 0 1rem 0;
}
.page-nav-section ul li {
margin-left: 3rem;
list-style: none;
}
.d-flex.align-items-center {
display: flex;
}
.page-nav-section ul li a.active {
color: #7F1730;
border-bottom: 2px solid #7F1730;
}
.page-nav-section ul li a {
font-size: 15px;
font-weight: 600;
padding: 0.2rem 0.5rem;
}
.page-nav-section ul li a:not(.active):after {
content: "";
display: block;
border-bottom: 2px solid #7F1730;
width: 0;
position: relative;
right: 0;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.page-nav-section ul li:hover a:not(.active):after {
width: 100%;
color: #7F1730;
}
.page-nav-section ul li:hover a:not(.active) {
color: #7F1730;
}
a{
text-decoration: none ;
color: #555;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-nav-section section hide-md-and-down">
<ul class="d-flex align-items-center">
<li><a href="#" class="active">All</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">News</a></li>
</ul>
</div>我找到了一个非常简单的解决方案，我把jQuery代码放在这里。
jQuery(document).ready(function($){
// Get current url
var url = window.location.href;
// Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
$('.menu a[href="'+url+'"]').addClass('current_page_item');
});