Question

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

这是我的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 code：

<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。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: