如何讓所有元素在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