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

Question

我在下面的代码中尝试实现的是，默认情况下，当我单击home复选框时，不显示home标题和段落，然后显示它

当我解开它的时候，它就隐藏起来了

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

当我点击home复选框，然后段落显示，当取消点击，然后隐藏

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

但我想实现后点击复选框，然后显示所有的东西。并且我想尝试当我运行页面时，只有复选框是显示后点击复选框，然后显示和隐藏的东西。

null

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>

null

这方面有什么帮助吗？非常感谢。

Answer 1

为了简单起见，我在这里使用了两个函数。首先是原始的myfunction()，它通过ID选择单个元素并显示和隐藏它们。我使用active和fade类分别显示隐藏引导导航丸。若要显示选项卡窗格，您需要追加活动类并删除淡入类；若要隐藏它，您需要删除活动类并添加淡入类。

现在，对于第二个动态方法hideShowById(event)，我使用了我通过事件获取的目标元素信息，并执行了相同的show hide过程，只是数据是从源元素中挑选出来的，就像bootstrap所做的那样。

null

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>