Question

我有两个隐藏的元素。单击按钮a时，我要显示div a。单击按钮b时，我要关闭div a并显示div b。

但是，如果在显示按钮后第二次单击按钮a，我希望它再次隐藏div。与按钮b相同。

更新：

我能够使按钮正确切换。

但是，在初次加载时，我希望它们是隐藏的，或者直到单击按钮后才可见。

以下是我当前使用的javascript

  function openFamily(evt, famName) {

        var i, x, y, tablinks;
        x = document.getElementsByClassName("family");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("familytablink");
        for (i = 0; i < x.length; i++) 

        document.getElementById(famName).style.display = "block";

    }

我有一个CSS元素：

.container{
display: none;

}

HTML：

    <div>
        <div>
             <button class="familytablink" onclick="openFamily(event,'zep')">Zephaniah</button>
            <button class="familytablink" onclick="openFamily(event,'anna')">Anna</button>
        </div>
    <div id="zep" class="container mainp-2 family">
        filler text
    </div>

    <div id="anna" class="container mainp-2 family">
        filler text
    </div>
    </div>

Answer 1

您可以在Jquery中使用隐藏和显示功能，并在单击按钮时使用它，例如：

喜欢

$("selector").click(function(){
    $("divid").hide();
    $("divid").show();
})

Answer 2

在jQuery中：

 <script type="application/javascript">
    $(document).ready(function(){
      $("#button1").click(function(){
        $("diva").show();
      });
      $("#button2").click(function(){
        $("diva").hide();
        $("divb").show();

      });
    });
    </script>

在JS中：

<script type="application/javascript">
   function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
         x.style.display = "block";
      } else {
         x.style.display = "none";
      }
   }
</script>

Answer 3

这是您如何实现这一目标的示例

var toggleDivById = function (id) {
  var div = document.getElementById(id);
  if (div.classList.contains('active')) {
    return div.classList.remove('active');
  }
  
  div.classList.add('active');
}

var handleToggleClick = function (event) {
  var targetId = event.target.dataset.target;
  toggleDivById(targetId);
}

document.querySelectorAll('.toggle')
  .forEach(function(toggle) {
    toggle.addEventListener('click', handleToggleClick)
  })

.toggable {
  width: 50px;
  height: 50px;
  background-color: crimson;
  border: 2px solid tomato;
  visibility: hidden;
  transition: all 100ms ease-out;
  border-radius: 5px;
  box-shadow: 1px 1px 2px indianred;
}

.toggable.active {
  visibility: visible
}

<button data-target="a" class="toggle">A</button>
<button data-target="b" class="toggle">B</button>
<hr/>
<div id="a" class="toggable">A</div>
<div id="b" class="toggable">B</div>

显示/隐藏元素并在它们之间切换js

3 个答案: