JavaScript .active 似乎对我不起作用

Question

因此，在我的网站主页上，我有一个服务列表。这个想法是，当你点击其中一个时，它旁边会出现一个与该服务相关的描述。然而，点击上述按钮并没有任何作用，我也不完全确定为什么。这个JS函数与我用于菜单按钮的函数相同，它的性能非常好。

我不是代码专业人士，我仍然会把自己描述为一个初学者，所以非常感谢在这件事上的任何帮助！

$(document).ready(function() {
$('.video-btn').click(function() {
$('description-video').toggleClass('active');
})
$('.animation-btn').click(function() {
$('description-animation').toggleClass('active');
})
})

.description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li id="video-btn"><a href="#">Video</a></li>
<li id="animation-btn"><a href="#">Animation</a></li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>

Answer 1

两件事：

在clicks标识符中，它们是类，但您在html 中将其定义为id

$('#video-btn').click(function() {
$('#animation-btn').click(function() {

您忘记了toggleClass标识符上的前缀

$('#description-video').toggleClass('active');
$('#description-animation').toggleClass('active');

Answer 2

• .video-btn是一个类。您有ID
• 您有链接，但您的事件处理程序在li上
• 选择器上缺少#

您需要委托并使用数据属性

$(function() {
$('.service-list').on("click",'.btn a', function() {
$("#"+this.dataset.desc).toggleClass('active');
});
});

.description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li class="btn"><a href="#" data-desc="description-video">Video</a></li>
<li class="btn"><a href="#" data-desc="description-animation">Animation</a></li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>