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

时间：2015-01-28 04:10:36

标签： javascript html css hide show

最近我一直在努力观看/学习javascript并对这个特定的节目感兴趣，因为我知道我将来可以使用它。

我在youtube上看到了如何隐藏/显示＆＃34;一个div所以我调整了它并使它成为＆＃34;显示/隐藏＆＃34; 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>

3 个答案:

答案 0 :(得分：3)

试试这段代码

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

答案 1 :(得分：2)

我会使用jquery。因为它需要大约几行代码才能实现这样的功能。但无论如何，这就是你能做的。

为所有div添加一个名为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';
  }

答案 2 :(得分：1)

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

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

相关问题
最新问题