Javascript 当存在其他div时，如何隐藏div？_Javascript_Html_Css_Hide_Show

Javascript 当存在其他div时，如何隐藏div？

javascript html css

Javascript 当存在其他div时，如何隐藏div？,javascript,html,css,hide,show,Javascript,Html,Css,Hide,Show,最近，我一直在尝试观看/学习javascript，并对这个特定的程序感兴趣，因为我知道我将来将能够大量使用它我在youtube上看到了一个关于如何隐藏/显示div的教程，所以我对它进行了调整，使其显示/隐藏div，并增加了两个div。我的问题是，当我想显示一个特定的div时，我想隐藏其他打开的div，因为我的代码现在显示所有的div，而不考虑当前的div <html> <head> <style type="text/css"> #hide_

最近，我一直在尝试观看/学习javascript，并对这个特定的程序感兴趣，因为我知道我将来将能够大量使用它

我在youtube上看到了一个关于如何隐藏/显示div的教程，所以我对它进行了调整，使其显示/隐藏div，并增加了两个div。我的问题是，当我想显示一个特定的div时，我想隐藏其他打开的div，因为我的代码现在显示所有的div，而不考虑当前的div

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

试试这个代码

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

我将使用jquery来实现这一点。因为实现这样的功能需要大约几行代码。但无论如何，这是你能做的

将名为divs的类添加到所有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';
  }

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

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

JSFIDLE示例

有关ID和类的更多信息

看看jqueryui的Accordion函数