我似乎无法让 new-album 出现和消失。当我将 console.log("here") 放入 click 函数时，没有任何内容打印到控制台。但是，我看不出我访问 test 链接的方式有什么问题。
$(document).ready(function() {
$('#test a').click(function() {
$(".content").toggleClass("new-album");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li id="test"><a href="#">New Album</a></li>
<li><a href="#">New Photo</a></li>
<li id="login"><a href="#">Login</a></li>
</ul>
</nav>
<div class="content">
<div class="new-album">
...
</div>
...
</div>最佳答案
您可以在要显示/隐藏的元素上切换 active 类，通过使用 opacity 而不是 display，您也可以使过程生动起来。
$(document).ready(function() {
$('#test a').click(function() {
$(".content").find(".new-album").toggleClass('active');
});
});.new-album {
width: 25px;
height: 25px;
background: blue;
transition: opacity 1s linear;
opacity: 0;
}
.active {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li id="test"><a href="#">New Album</a></li>
<li><a href="#">New Photo</a></li>
<li id="login"><a href="#">Login</a></li>
</ul>
</nav>
<div class="content">
<div class="new-album">
...
</div>
</div>
</body>关于javascript - 麻烦切换类(jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42964253/