如何在兩個按鈕中切換活動類並使用 jQuery 隱藏 div？

Question

就我而言，我的 button1 默認處於活動狀態，因此我的 form1 也默認顯示，我想通過單擊 button1 和 button2 來切換這兩個表單。 我們如何使用 jQuery 實現這一點。

<button type="button" class="btn btn-light activate-form active-btn">
  button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form">
  button 2 = show form2
</button>

<form id="normal-user-form" class="custom-register">form1</form>
<form id="business-user-form" class="custom-register">form2</form>

<script>
  $(function() {
    $(".activate-form").click(function() {
        
        $(".activate-form").removeClass("active-btn");
        
        $(this).addClass("active-btn");
    });
  });
</script>

Answer 1

如果我理解你的意思是正確的，你正在尋找這樣的東西：

 $(function() { $(".activate-form").click(function() { $(".activate-form").removeClass("active-btn"); var formId = $(this).addClass("active-btn").data('target'); $("form").removeClass("active-btn"); $(formId).addClass("active-btn"); }); });

 .active-btn { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn btn-light activate-form active-btn" data-target="#normal-user-form"> button 1 = show form1 </button> <button type="button" class="btn btn-light activate-form" data-target="#business-user-form"> button 2 = show form2 </button> <form id="normal-user-form" class="custom-register active-btn">form1</form> <form id="business-user-form" class="custom-register">form2</form>

您可以嘗試在<button>標簽內添加data-target屬性來引用表單 id。

Answer 2

• 為您的按鈕和表單使用.is-active （帶有適當的 CSS）
• 將表單緩存在變量中
• 使用data-*屬性（即：下面示例中的data-target ）存儲您要在點擊時定位的所需選擇器

 jQuery(($) => { const $actForms = $(".custom-register"); const $actFormsBtns = $(".activate-form"); $actFormsBtns.on("click", function() { $actFormsBtns.add($actForms).removeClass("is-active"); $(this).add($(this.dataset.target)).addClass("is-active"); }); });

 .activate-form.is-active { background: #0bf; } .custom-register { display: none; } .custom-register.is-active { display: block; }

 <button type="button" data-target="#normal-user-form" class="btn btn-light activate-form is-active" >form1</button> <button type="button" data-target="#business-user-form" class="btn btn-light activate-form" data-target="">form2</button> <form id="normal-user-form" class="custom-register is-active">form1</form> <form id="business-user-form" class="custom-register">form2</form> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>