javascript - 如何使用 css 和 bootstrap 进行制表符

Question

我在下面的代码中尝试做的事情首先我检查了复选框1和2，当我取消选中复选框2然后添加新选项卡时再次出现，当我选中复选框然后添加新选项卡时再次出现。

我正在尝试这样做，但我无法实现。

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("mardi");
  if (checkBox.checked == true){
    mardi.style.display = "block";
    
    var tet = document.getElementById("set");
     tet.style.marginLeft = "-10%";
     var tet1 = document.getElementById("set1");
     
      if (checkBox.checked == false){
     tet1.style.marginTop = "16%";
      } else {
      tet1.style.marginTop = "96%";
      }
  } else if (checkBox.checked == false) {
     mardi.style.display = "none";
     tet1.style.marginTop = "150%";
  }
}

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}

.container-2{
display:flex
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <input class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input class="mr-1" type="checkbox" value="mardi" id="myCheck" onclick="myFunction()" />2
  <input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input class="mr-1" type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>


<div class="container-2">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">
  
    <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
    </li>
    
  </ul>

  <!-- Tab panes -->
  <div class="tab-content" id="set1">
    <div id="homemade" class="container tab-pane active"><br>
    <button type="button" class="btn btn-primary" >ADD NEW</button>
    </div>
  </div>
  
  </div>
  
  <div class="row mr-2 ml-0" style="display:none;" id="mardi">
      <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
    </li>
   
   
  </ul>

  <!-- Tab panes -->
  <div class="tab-content" id="set">
    <div id="home" class="container tab-pane active"><br>
        <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#home">Red</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
        </li>
      </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>Red</h3>
      
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Green</h3>
      
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Blue</h3>
      
    </div>
  </div>
      
    </div>
    
   
  </div>
  
  </div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
  <div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

对此的任何帮助都非常感谢。

标签： javascripthtmlcss