Question

寻找一个好的JavaScript，帮助我隐藏/显示多个div，点击一个按钮点击而不是一个点击，所以我可以在博客中使用它。我一直在寻找一段时间的答案，并且无法找到一个使用JavaScript和/或CSS的好答案。我是一个新手所以请耐心等待。以下是我的代码可以工作，但我想简化它并使其工作，以便当我再次单击相应的按钮时它将关闭div。

CSS

    <head>
    <style>
    #myDIV1 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }


    #myDIV2 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }


    #myDIV3 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }


    #myDIV4 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }

    </style>
    </head>

我知道有一种更简单的方法，但这是我能找到的唯一方法，它适用于我希望它在大多数情况下做的事情

HTML

    <body>

      <p>Click button to see div.</p>

      <button onclick="myFunction1()">One</button>

      <button onclick="myFunction2()">Two</button>

      <button onclick="myFunction3()">Three</button>

      <button onclick="myFunction4()">Four</button>

    <div id="myDIV1">

      This is the div1 element.

    </div>

    <div id="myDIV2">

      This is the div2 element.

    </div>

    <div id="myDIV3">

      This is the div3 element.

    </div>

    <div id="myDIV4">

      This is the div4 element.

    </div>

的Javascript

    <script> 

      function myFunction1() {

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

        document.getElementById("myDIV2").style.display = "none";

        document.getElementById("myDIV3").style.display = "none";

        document.getElementById("myDIV4").style.display = "none";

    }

    function myFunction2() {

      document.getElementById("myDIV1").style.display = "none";

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

      document.getElementById("myDIV3").style.display = "none";

      document.getElementById("myDIV4").style.display = "none";

    }

    function myFunction3() {

      document.getElementById("myDIV1").style.display = "none";

      document.getElementById("myDIV2").style.display = "none";

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

      document.getElementById("myDIV4").style.display = "none";

    }

    function myFunction4() {

      document.getElementById("myDIV1").style.display = "none"; 

      document.getElementById("myDIV2").style.display = "none";

      document.getElementById("myDIV3").style.display = "none";

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

    }

    </script>

提前感谢任何帮助。

Answer 1

我建议先将您的代码分开 - 这样会更干净，更可重复 - 例如 myStyle.css ， myScript.js ， index.html

在css文件中添加js和html文件，例如 -

<link rel="stylesheet" type="text/css" href="myStyle.css"> <script type="text/javascript" src="myScript.js"></script>

src - ＆gt;表示文件的源路径。在这里，我假设我们所有css，js，＆＃39; html＆＃39;档案在同一个地方。

＆＃13;
＆＃13;
var divs = ["Div1", "Div2", "Div3", "Div4"]; var visibleDivId = null; function divVisibility(divId) { if(visibleDivId === divId) { visibleDivId = null; } else { visibleDivId = divId; } hideNonVisibleDivs(); } function hideNonVisibleDivs() { var i, divId, div; for(i = 0; i < divs.length; i++) { divId = divs[i]; div = document.getElementById(divId); if(visibleDivId === divId) { div.style.display = "block"; } else { div.style.display = "none"; } } }
＆＃13;
.buttons a { font-size: 16px; } .buttons a:hover { cursor:pointer; font-size: 16px; }
＆＃13;
<div class="main_div"> <div class="buttons"> <a href="#" onclick="divVisibility('Div1');">Div1</a> | <a href="#" onclick="divVisibility('Div2');">Div2</a> | <a href="#" onclick="divVisibility('Div3');">Div3</a> | <a href="#" onclick="divVisibility('Div4');">Div4</a> </div> <div class="inner_div"> <div id="Div1">I'm Div One</div> <div id="Div2" style="display: none;">I'm Div Two</div> <div id="Div3" style="display: none;">I'm Div Three</div> <div id="Div4" style="display: none;">I'm Div Four</div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果你想同时隐藏/显示所有div，那么你必须为ex： .toggle 提供所有div相同的类，而不是你可以这样做：

function myFunction1(){
    $(".toggle").slideToggle();
}

如果你想一次隐藏/显示一个div，你可以用id：

执行此操作

function myFunction1(){
    $("#myDIV1").slideToggle();
}

使用不同的按钮：

function myFunction1(id){
    $("#"+id).slideToggle();
}

在此处传递ID：

<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>

Answer 3

我通过.toggle函数找到了我想要的答案，谢谢你的帮助。我在这里找到答案：radomsnippets.com

Answer 4

我们可以使用可重复使用的代码轻松添加无限数量的按钮。

这是一个完整的例子！享受

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.generalclass {
  width: 100%;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
  margin: 10px;
  padding: 10px;
  display: none;
}

.button{
	background: red;
    padding: 10px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    border: none;   
    
}

.button:hover{
	background: black;    
}

</style>
</head>
<body>

<button class="button" onclick="myFunction('button1')">Button 1</button>

<button class="button" onclick="myFunction('button2')">Button 2</button>



<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>

<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>


<script>
function myFunction(divid) {

  var x = document.getElementById(divid);  
  
  if (x.style.display == "none") 
  {
    x.style.display = "block";
  } 
  else {
    x.style.display = "none";
  }  
}
</script>


</body>
</html>

显示/隐藏多个Divs Javascript

4 个答案: