分区。用按钮点击切换[重复]

Question

我正在处理一个表单，并希望在单击不同按钮时显示不同的 div，但无法使其工作我使用了带有引导程序的数据切换，但它同时显示了两个 div

这第一张图片是当我点击按月计费时发生的情况

在第二张图片中，当我点击按年计费时，第一个 div 也会显示，但我希望只有第二个 div 可见

当您首先单击按月计费，然后单击按年计费时，两个 div 都是可见的，我只希望一个应该可见，例如，如果您首先单击按月计费，则与其相关的 div 应该显示，如果您单击按年计费接下来，按月计费的 div 应该隐藏，只有按年计费的 div 应该是可见的。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row justify-content-evenly">

  <div class="col d-grid gap-2 col-3 mt-4 mb-3">
    <button type="button" class="btn btn-outline-primary" id="billed-monthly" value="monthly" style="border: solid 1px grey;" data-bs-toggle="collapse" data-bs-target="#billmonthly" aria-expanded="false" aria-controls="collapseExample">Billed Monthly</button>

  </div>
  <div class="col d-grid gap-2 col-3 mt-4 mb-3">
    <button type="button" class="btn btn-outline-primary" id="billed-yearly" value="yearly" style="border: solid 1px grey;" data-bs-toggle="collapse" data-bs-target="#billyearly" aria-expanded="false" aria-controls="collapseExample">Billed Yearly</button>
  </div>
</div>

<div class="row mt-2 collapse" id="billmonthly">
  <div class=" col d-flex justify-content-end">
    <h3>Billed now: 199</h3>
  </div>
</div>
<div class="row mt-2 collapse" id="billmonthly">
  <div class=" col d-flex justify-content-end">
    <p>By clicking "Start Premium Plan", you agree to be charge 199 every<br> month, unless you cancel. You acknowledge that refunds won't be<br> available on cancellation.</p>
  </div>
</div>
<div class="row mt-2 collapse" id="billyearly">
  <div class=" col d-flex justify-content-end">
    <h3>Billed now: 2030</h3>
  </div>
</div>
<div class="row mt-2 collapse" id="billyearly">
  <div class=" col d-flex justify-content-end">
    <p>By clicking "Start Premium Plan", you agree to be charge 2030 every<br> year, unless you cancel. You acknowledge that refunds won't be<br> available on cancellation.</p>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answer 1

我为您创建了一个演示来获取您的功能。请注意，我没有使用 Bootstrap。它是完整的 jQuery 方法。

HTML

<a href="#" id="billNow">Bill Now </a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" id="billYearly">Bill Yearly </a><br/><br/>
<div id="showdetails">
    <div id="billnowdetails">
        <p>details of Bill now</p>
    </div>
    <div id="billyeardetails">
    <p>details of Bill Yearly</p></div>
</div>

JAVASCRIPT/JQUERY

<script>
$(document).ready(function(){
let billnow = $("#billnowdetails").remove();
let billyear = $("#billyeardetails").remove();
    $("#billNow").on("click",function(e){
        e.preventDefault();
        $("#showdetails").find("#billyeardetails").remove();
        $("#showdetails").append(billnow);
    });
    
    $("#billYearly").on("click",function(e){
        e.preventDefault();
        $("#showdetails").find("#billnowdetails").remove();
        $("#showdetails").append(billyear);
    });
});
</script>

注意：如果您想检查结果。您可以在此处复制并粘贴代码https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_lib_google。