gpt4 book ai didi

javascript - 麻烦切换类(jquery)

转载 作者:行者123 更新时间:2023-11-28 05:17:48 25 4
gpt4 key购买 nike

我似乎无法让 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com