Question

显示/隐藏多个 Div Javascript

2015-08-04

46981

html

寻找一个好的 JavaScript 来帮助我通过单击按钮（而不是单击 a href）来隐藏/显示多个 div，以便我可以在 blogger 中使用它。我已经寻找答案一段时间了，但一直找不到使用 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

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

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

src -> 表示文件的源路径。在这里我假设我们所有的 css 、 js 、'html' 文件都在同一个位置。

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";
        }
      }
    }

.buttons a {
  font-size: 16px;
}
.buttons a:hover {
  cursor:pointer; 
  font-size: 16px;
}

<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>

Answer 2

如果您想同时隐藏/显示所有 div，那么您必须为所有 div 赋予相同的类，例如： .toggle ，然后您可以这样做：

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