如何使用复选框显示和隐藏段落

Question

我在下面的代码中尝试实现的默认主页标题和段落在我点击主页复选框时不显示，然后显示

当我取消点击时它会隐藏

我的功能在下面的代码中运行良好，但我无法实现这一点

当我点击主页复选框然后分段它的显示和当取消点击然后它隐藏

检查我在运行文件时在我的代码中发布的以下代码，默认情况下主页段落是显示的。

但我想在单击复选框后实现，然后显示所有内容。我想尝试当我运行页面时，仅在单击复选框后显示复选框，然后显示和隐藏内容。

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

function myFunction1() {
  var checkBox = document.getElementById("myCheck1");
  var text1 = document.getElementById("text1");
  if (checkBox.checked == true){
    text1.style.display = "block";
  } else {
     text1.style.display = "none";
  }
}

function myFunction2() {
  var checkBox = document.getElementById("myCheck2");
  var text2 = document.getElementById("text2");
  if (checkBox.checked == true){
    text2.style.display = "block";
  } else {
     text2.style.display = "none";
  }
}

  <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" id="myCheck2" onclick="myFunction2()">home
  <input class="mr-1" type="checkbox" id="myCheck" onclick="myFunction()">menu 1
  <input class="mr-1" type="checkbox" id="myCheck1" onclick="myFunction1()">menu 2

 
</div>


<div class="container">
  <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item" id="text2" style="display:none">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item" id="text" style="display:none">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
  <li class="nav-item" id="text1" style="display:none">
      <a class="nav-link" data-toggle="pill" href="#abc">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active" ><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
    
      <h3>Menu 1</h3>
     
    </div>
     <div id="abc" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    
</div>

有什么帮助吗，非常感谢。

Answer 1

为了简单起见，我在这里使用了两个函数。首先是您原来的myFunction()，它通过 id 选择单个元素并显示隐藏它们。我使用active 和fade 类分别显示隐藏引导导航药丸。要显示tab-pane，您需要附加active 类并删除fade 类并隐藏它，您需要删除active 类并添加fade 类。

现在对于第二个动态方法hideShowById(event)，我使用了我通过事件获取的目标元素信息，并执行了相同的显示隐藏过程，除了数据是从源元素中挑选出来的，就像引导程序一样。

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("menu1");
  if (checkBox.checked == true){
    text.classList.add("active");
    text.classList.remove("fade");
  } else {
    text.classList.remove("active");
    text.classList.add("fade");
  }
}

function hideShowById(event) {
  var checkBoxChecked = event.checked;
  var text = document.getElementById(event.getAttribute('data-toggle'));
  if (checkBoxChecked == true){
    text.classList.add("active");
    text.classList.remove("fade");
  } else {
    text.classList.remove("active");
    text.classList.add("fade");
  }
}

<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" id="myCheck2" onclick="hideShowById(this)" data-toggle="home" checked>
  <label for="myCheck2">home</label>
  <input class="mr-1" type="checkbox" id="myCheck" onclick="myFunction()">
  <label for="myCheck">menu 1</label>
  <input class="mr-1" type="checkbox" id="myCheck1" onclick="hideShowById(this)" data-toggle="abc">
  <label for="myCheck1">menu 2</label>
</div>

<div class="container">
  <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item" id="text2" style="display:none">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item" id="text" style="display:none">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
  <li class="nav-item" id="text1" style="display:none">
      <a class="nav-link" data-toggle="pill" href="#abc">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>      
      <h3>Menu 1</h3>
    </div>
     <div id="abc" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    
</div>