如何在存在另一个 div 时隐藏一个 div？

Question

最近我一直在尝试 watch/study javascript 并且对这个程序很感兴趣，因为我知道我将来会经常使用它。

我在 youtube 上看过关于如何 "hide/show" div 的教程，所以我对其进行了调整并制作了 "show/hide" div's 并添加了两个 div's。我的问题是当我想显示一个特定的 div's 时我想隐藏其他打开的 div's 因为我的代码现在显示所有 div's 而不管现在的

<html>

<head>

  <style type="text/css">
    #hide_add_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_edit_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_delete_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
  </style>

  <script type="text/javascript">
    function toggle_add_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';
      else
        divelement.style.display = 'block';
    }

    function toggle_edit_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';
      else
        divelement.style.display = 'block';
    }

    function toggle_delete_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';
      else
        divelement.style.display = 'block';
    }
  </script>

</head>

<body>

  <table border='1'>
    <tr>
      <td colspan='3'>
        <center>First Name</center>
      </td>
    </tr>
    <td>
      <button onclick="toggle_add_fname('hide_add_fname');">Add</button>
    </td>
    <td>
      <button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
    </td>
    <td>
      <button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
    </td>
    </tr>
  </table>

  <div id="hide_add_fname">
    <form method='POST'>
      <center>Add First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Add'>
      </center>
    </form>
  </div>

  <div id="hide_edit_fname">
    <form method='POST'>
      <center>Edit First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Edit'>
      </center>
    </form>
  </div>

  <div id="hide_delete_fname">
    <form method='POST'>
      <center>Delete First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Delete'>
      </center>
    </form>
  </div>

</body>

</html>

Answer 1

试试这个代码

  <html>

<head>

  <style type="text/css">
    #hide_add_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_edit_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_delete_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
  </style>

  <script type="text/javascript">
    function toggle_add_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';  

      else{
        divelement.style.display = 'block';
        document.getElementById('hide_edit_fname').style.display='none';
        document.getElementById('hide_delete_fname').style.display='none';
        }
    }


    function toggle_edit_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';          
      else
      {

        divelement.style.display = 'block';
        document.getElementById('hide_add_fname').style.display='none';
        document.getElementById('hide_delete_fname').style.display='none';

        }


    }

    function toggle_delete_fname(id) {

      var divelement = document.getElementById(id);
      if (divelement.style.display == 'block')    
        divelement.style.display = 'none';
      else{
        divelement.style.display = 'block';
        document.getElementById('hide_add_fname').style.display='none';
        document.getElementById('hide_edit_fname').style.display='none';
        }
    }
  </script>

</head>

<body>

  <table border='1'>
    <tr>
      <td colspan='3'>
        <center>First Name</center>
      </td>
    </tr>
    <td>
      <button onclick="toggle_add_fname('hide_add_fname');">Add</button>
    </td>
    <td>
      <button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
    </td>
    <td>
      <button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
    </td>
    </tr>
  </table>

  <div id="hide_add_fname">
    <form method='POST'>
      <center>Add First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Add'>
      </center>
    </form>
  </div>

  <div id="hide_edit_fname">
    <form method='POST'>
      <center>Edit First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Edit'>
      </center>
    </form>
  </div>

  <div id="hide_delete_fname">
    <form method='POST'>
      <center>Delete First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Delete'>
      </center>
    </form>
  </div>

</body>

</html>

Answer 2

我会为此使用 jquery。因为它大约需要几行代码来实现这样的事情。但无论如何，这是您可以做的。

将一个名为 div 的 class 添加到您所有的 div 中。并将此代码粘贴到每个切换功能的开头。

var myElements = document.querySelectorAll(".divs");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.display = 'none';
}

您可以将上述代码放在一个函数中，然后运行将其放在切换函数的开头，我建议您这样做以使您的代码更简洁。

无论如何，我在这里所做的是在开始时隐藏每个 div，而不管点击了什么。然后您的代码将只显示需要显示的 div 。我不太擅长 javascript 的 DOM 操作。 Javascript 不对请高手指正

编辑： 我错过了你也想切换它的事实。这是更新后的代码。

function hidedivs(){
     var myElements = document.querySelectorAll(".divs");

     for (var i = 0; i < myElements.length; i++) {

        myElements[i].style.display = 'none';
     }
  }
  function toggle_add_fname(id) {
     var divelement = document.getElementById(id);
     if(divelement.style.display == 'none'){
        hidedivs();
     }

     if(divelement.style.display == 'block')
        divelement.style.display = 'none';
     else
        divelement.style.display = 'block';
  }

  function toggle_edit_fname(id) {
     var divelement = document.getElementById(id);
     if(divelement.style.display == 'none'){
        hidedivs();
     }

     if(divelement.style.display == 'block')
        divelement.style.display = 'none';
     else
        divelement.style.display = 'block';
  }

  function toggle_delete_fname(id) {
     var divelement = document.getElementById(id);
     if(divelement.style.display == 'none'){
        hidedivs();
     }
     if(divelement.style.display == 'block')
        divelement.style.display = 'none';
     else
        divelement.style.display = 'block';
  }

Answer 3

当您需要多次使用同一个特定选择器时，类是更好的选择。

<div id="hide_add_fname" class='fname'>

一种应用样式的灵活方式

    var element_list = document.getElementsByClassName(class_name);
    for (var i = 0; i < element_list.length; i++) {
        element_list[i].style.display = 'none';
    }

JSFiddle 示例

http://jsfiddle.net/83yrf4tx/

有关 ID 和类

的更多信息

In CSS what is the difference between "." and "#" when declaring a set of styles?

如何在存在另一个 div 时隐藏一个 div？

How do I hide a div when another divs are present?

html

javascript

css

show

hide