Question

我是jquery的新手，并试图了解toggleClass函数。我自己尝试了几次，并在SO上阅读了一些帖子，但效果仍然没有出现。

HTML：

<ul id="lists">
<li><a id="a" href="#">a</a></li>
<li><a id="b" href="#">b</a></li>
<li><a id="c" href="#">c</a></li>
<li><a id="d" href="#">d</a></li>
<li><a id="e" href="#">e</a></li>
</ul>

的CSS：

#lists {
list-style-type: none;
}
#lists > li {
display: inline;
}
a:link, a:visited {
padding: 10px 20px;
text-decoration: none;
color: black;
background-color: red;
border: 4px solid white;
}
a:hover {
color: white;
}
.active {
background-color: green;
}

的javascript：

$(document).ready(function () {
$("a#a, a#b, a#c, a#d, a#e").on("click", function () {
    $(this).toggleClass("active");
});
});

我还制作了demo。我的代码出了什么问题？

祝你好运

Answer 1

这是因为您的:visited会覆盖您的$.toggleClass，您应该这样做：

CSS

a {
    padding: 10px 20px;
    text-decoration: none;
    color: black;
    background-color: red;
    border: 4px solid white;
}

查看此Fiddle ..

jquery toggleclass适合css悬停效果

1 个答案: