如何让所有元素在javascript中不可见？

Question

我正在使用navigo vanilla javascript路由器库来制作单页应用程序，我正在尝试实现这一部分。

router
  .on('/products/list', function () {
    // display all the products... here i need to hide and show
  })
  .resolve();

我认为我需要做的是隐藏并显示一些div，所以我如何将所有div设置为不可见或使页面上的所有内容都不可见。

<body>
    <div id="homepage">
        <h1>home</h1>
    </div>
    <div id="ad">
        <h1>advert</h1>

    </div>
    <div id="errorpage">
        <h1>error</h1>

    </div>

    <div class="state">
        <span class="users">?</span> online
    </div>
    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/navigo@7.1.2/lib/navigo.min.js"></script>
    <script src="script.js"></script>
</body>

Answer 1

最简单和最有效的方法是将产品放在一个容器（即div）中并设置其显示（无和阻塞）或它的可见性或不透明度（无论哪个浮动你的船）：

<div id="products">
   ....
</div>

JS：隐藏：

document.GetElementById("products").style.display = "none";

显示：

document.GetElementById("products").style.display = "block";

Answer 2

使用id隐藏DIV

 <div id="homepage">
        <h1>home</h1>
</div>

使用JQuery

$('#homepage').hide();//hide
$('#homepage').show();//Show

使用Javascript

document.getElementById('homepage').style.display = 'none'; //hide
document.getElementById('homepage').style.visibility = 'hidden';      // hide


document.getElementById('homepage').style.display = 'block';          // Show
document.getElementById('homepage').style.display = 'inline';         // Show
document.getElementById('homepage').style.display = 'inline-block';   // Show
document.getElementById('homepage').style.visibility = 'visible';     // Show

如果要隐藏页面中的所有div

使用JQuery

$('div').hide();//hide

使用Javascript

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  divs[i].style.display = 'none';        
}

如何让所有元素在javascript中不可见？

问题描述

2 个解决方案

解决方案1
2 2018-10-21 04:40:38

解决方案2
1 已采纳 2018-10-21 04:56:03

如何让所有元素在javascript中不可见？

问题描述

2 个解决方案

解决方案1 2 2018-10-21 04:40:38

解决方案2 1 已采纳 2018-10-21 04:56:03

解决方案1
2 2018-10-21 04:40:38

解决方案2
1 已采纳 2018-10-21 04:56:03