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>