Question

我遇到了jQuery点击功能的问题。

点击导航后，我希望删除active上的所有li课程，然后将课程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是如何引起这个问题的，但我可能是错的。

Live site

Answer 1

我认为你想改变这些界限：

$('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并未定位正确的元素

1 个答案: