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

2件事：

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

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

您忘记了 toggleClass 标识符的前缀

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

Answer 2

• .video-btn 是一个类。 你有身份证
• 您有链接，但您的事件处理程序在 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>