我在使用 jQuery 单击功能时遇到问题。
当点击导航时，我希望删除 li 上的所有 active 类，然后将类 active 添加到 $(this) 然后，通常，世界是一个快乐的地方，但这次不是。
这可能很简单，但我尝试了十几个选项，甚至重写了一些 CSS 以确保它针对正确的元素。
HTML
<body>
<header>
<div class="wrapper">
<p>Health Benefits Ohio</p>
<p>Heliping Ohioans with healthcare choices</p>
</div>
</header>
<nav>
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="">About OAHU</a></li>
<li><a href="">Find an Agent</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Agents Login</a></li>
</ul>
</nav>
<div class="slideshow">
<section id="rotator">
</section>
</div>
<div class="body">
<header>
</header>
<div class="wrapper">
<div class="fill"></div>
</div>
</div>
<footer>
<div class="footerFill"></div>
</footer>
</body>
jQuery
$(document).ready(function() {
$('nav > ul > li > a').on('click', function() {
$('nav > ul > li > a').parent().removeClass('active');
$(this).addClass('active');
});
});
CSS
nav {
width: 100%;
height: 55px;
background: #0c5b78;
/*background: -webkit-gradient(linear, 0% 0% 0% 100%, from(#0c5b78), to(#c4c4c4));
background: -webkit-linear-gradient(left, #0c5b78, #c4c4c4);
background: -moz-linear-gradient(left, #0c5b78, #c4c4c4);
background: -ms-linear-gradient(left, #0c5b78, #c4c4c4);
background: -o-linear-gradient(left, #0c5b78, #c4c4c4);*/
border-bottom: 5px solid rgba(255, 255, 255, 0.3);
}
nav > ul {
width: 960px;
height: 55px;
margin: 0 auto;
padding: 0;
list-style-type: none;
position: relative;
}
nav > ul > li {
height: 55px;
width: 182px;
font-size: 20px;
line-height: 55px;
text-align: center;
background: rgba(255, 255, 255, 0);
color: #fff;
float: left;
display: block;
margin: 0 5px 0 5px;
text-shadow: 0 -1px 0 black;
border-radius: 7px 7px 0 0;
}
.active {
height: 50px;
margin-top: 5px;
background: rgba(255, 255, 255, 1);
color: #4b4b4b;
text-shadow: 0 -1px 1px #c7c7c7;
}
.active > a {
color: #4b4b4b;
}
nav > ul > li > a {
text-decoration: none;
color: #fff;
height: 50px;
width: 172px;
display: block;
margin-left: 5px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
nav > ul > li > a:hover {
color: #4b4b4b;
height: 50px;
width: 172px;
display: block;
text-shadow: 0 -1px 1px #c7c7c7;
border-radius: 7px 7px 0 0;
background: rgba(255, 255, 255, 1);
margin-top: 5px;
display: block;
}
如果有人能给我一些提示或好的资源，我可以利用它来解决我的问题，那么我将不胜感激!我是 jQuery 新手，但我猜测我的 css 是如何导致这个问题的，但我可能是错的。
最佳答案
我认为您想要更改这些行:
$('nav > ul > li > a').parent().removeClass('active');
$(this).addClass('active');
至:
$('nav > ul > li').removeClass('active');
$(this).parent().addClass('active');
您还应该向链接添加 href:
<a href="#">About OAHU</a>
这就是你的点击函数的结尾:
return false;
关于jQuery 点击时未定位正确的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18495609/