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がこの問題をどのように引き起こしているかを推測していますが、間違っている可能性があります。