Как сделать все элементы невидимыми в JavaScript? - PullRequest
Новая
       6

Как сделать все элементы невидимыми в JavaScript?

0 голосов
/ 21 октября 2018

Я использую библиотеку маршрутизатора navo 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>

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Скрыть 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';        
}
0 голосов
/ 21 октября 2018

Самый простой и эффективный способ - поместить продукты в контейнер (например, div) и установить его отображение (не отображать и не блокировать) или его видимость, или непрозрачность (в зависимости от того, что плавает на вашей лодке): 

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

JS: скрыть: 

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

показать: 

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