我正在使用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>
使用 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';
}
最简单和最有效的方法是将产品放入容器(即div(中并设置其显示(设置为无和阻止(或可见性或不透明度(无论您的船漂浮多少(：
<div id="products">
....
</div>
.JS： 要隐藏：
document.GetElementById("products").style.display = "none";
以显示：
document.GetElementById("products").style.display = "block";