使用 jquery 更新到导航栏中的活动类

Question

我正在尝试操作我的 css，以便单击任何导航栏链接将其更新为活动类，并且单击的栏会根据 css 样式表更改其属性。但是，当我点击主页或联系人等时，我的导航栏没有任何变化。它不起作用。

这是我的 jquery 代码：

$(document).click(function() {
    console.log(location.pathname.split('/')[1]);
    $('nav a[href^="'+location.pathname.split('/')[1]+'"]').addClass('active');
});

CSS 代码：

nav a {
    display: block;  
    width:100%;  
    padding: 20px 20px;
    background-color:firebrick;
}

nav a.active {
    background:blue;
    text-decoration: none;
    color: antiquewhite;
}

nav li {
    display: inline-block;
}

HTML 代码：

<nav>
    <ul>
        <li><a href="JQuery.html">Home</a></li>
        <li><a href="copy.html">About</a></li>
        <li><a href="JQuery.html">Projects</a></li>
        <li><a href="JQuery.html">Contact Pranshu</a></li>
    </ul>
</nav>

Answer 1

您必须在 $(document).ready(function(){}); 上添加代码，而不是在 click() 事件上添加代码。因为你点击事件里面的代码只有在选择器点击之后才会执行，ready()里面的代码在DOM完全加载时执行。在您的场景中，您需要在页面加载后而不是单击后执行代码。所以你的代码如下所示：

$(document).ready(function(){
    console.log(location.pathname.split('/')[1]); 
    $('nav a[href^="'+location.pathname.split('/') [1]+'"]').addClass('active');
}); 

在点击事件上测试 addClass。

$('a').click(function(e){
e.preventDefault();
var href = $(this).attr('href');
console.log(href)
$('a').removeClass('active');
$('nav a[href^="'+href+'"]').addClass('active');
});

nav a{
   display: block;  
   width:100%;  
   padding: 20px 20px;
   background-color:firebrick;

}
nav a.active{
background:blue;
text-decoration: none;
color:antiquewhite;
}
nav li{
display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="JQuery.html" class="active">Home</a></li>
<li><a href="copy.html">About</a></li>
<li><a href="JQuery.html">Projects</a></li>
<li><a href="JQuery.html">Contact Pranshu</a></li>
</ul>
</nav>