在div之間切換，它將在純js中占據整個頁面
[英]Switch between div that will take up entire page in pure js
問題描述
我正在尋找一種方法，使多個<div>元素具有一些可以在<div>之間切換的功能，就好像它們是頁面一樣。 我希望有一個“活動”頁面，當單擊某些元素或<a> ，有一種方法可以切換到另一個占據整個頁面的div。 在任何給定時間，只有一個類似頁面的<div>可見。
我知道這可以在jquery中完成，例如使用div的data-role="page"屬性，但是我想知道如何在純JavaScript和CSS中機械地完成此操作。
這是我寫的一個示例，但是它不起作用，它只允許一次過渡，然后陷入困境。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Divs</title> <style> .uipage { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; border: 0; } .lightpage { background-color: #fcfbd1; } .darkpage { background-color: red; } </style> </head> <body> <div class="lightpage" id="pageone" name="pagetype"> <p onclick="switchPages();">Hello! This is page one!</p> </div> <div class="darkpage" id="pagetwo" name="pagetype"> <p onclick="switchPages();">Hello! This is page two!</p> </div> <script> document.getElementById('pageone').style.top = 0; document.getElementById('pageone').style.left = 0; document.getElementById('pageone').style.width = '100%'; document.getElementById('pageone').style['min-height'] = '100%'; document.getElementById('pageone').style.position = 'absolute'; document.getElementById('pageone').style.border = 0; </script> <script type="text/javascript"> var currentPage = 1; function switchPages() { if(currentPage === 1) { document.getElementById('pagetwo').style.top = 0; document.getElementById('pagetwo').style.left = 0; document.getElementById('pagetwo').style.width = '100%'; document.getElementById('pagetwo').style['min-height'] = '100%'; document.getElementById('pagetwo').style.position = 'absolute'; document.getElementById('pagetwo').style.border = 0; currentPage = 2; } else if(currentPage === 2) { document.getElementById('pageone').style.top = 0; document.getElementById('pageone').style.left = 0; document.getElementById('pageone').style.width = '100%'; document.getElementById('pageone').style['min-height'] = '100%'; document.getElementById('pageone').style.position = 'absolute'; document.getElementById('pageone').style.border = 0; currentPage = 1; } } </script> </body> </html>
基本上有一個過渡到第二頁，但此后將不起作用。 我不確定在這里動態更改樣式對象是否是一個好方法。
2 個解決方案
解決方案1
3 已采納 2019-03-27 19:00:24
在我看來，您只是將樣式應用於要顯示的<div> ，而實際上並未隱藏其他樣式。
您是否嘗試過應用display: none; 到您要隱藏的div？
我會申請所需的樣式股利假設它是可見的，只是改變了display的模式none以block或反之亦然取決於一個點擊
解決方案2
1 2019-03-27 19:07:51
發生了幾件事。 首先，應盡可能避免使用樣式。 而是使用類，它們可以更好地運行，並且您可以重用這些類。 那你就可以用
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
其次，您要在目標ID中添加樣式，但並沒有在您不需要的ID中移除樣式。
我知道您需要純js，但您可能還想查找jquery。 使用簡單的命令，它可以使這樣的事情變得更加容易
$('#pageone').show();
$('#pagetwo').hide();
隨機順序<div>或<li>在頁面加載時使用純 JS</li></div><div id="text_translate"><p> 我看到了多個使用 jQuery 隨機化<div> （或<li>或其他）順序的答案，但我如何使用純 javascript 來做到這一點？</p><pre class="lang-html prettyprint-override"> <ul id="wrapper"> <li>Answer 1</li> <li>Answer 2</li> <li>Answer 3</li> </ul></pre></div>
[英]Randomize order of <div>s or <li>s with pure JS on page load
使用position absolute時如何使vue組件中的div占據整個屏幕？
[英]How to make a div in a vue component take up the entire screen when using position absolute?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
為什么Highcharts <div> 元素占據了整個頁面？
圖片輪播：強制圖片占據整個div（每個圖片）
使用jQuery / JS向上/向下切換DIV元素
使導航欄占用css中的整個頁面高度
D3js sunburst占用了包含元素的整個大小
隨機順序<div>或<li>在頁面加載時使用純 JS</li></div><div id="text_translate"><p> 我看到了多個使用 jQuery 隨機化<div> （或<li>或其他）順序的答案，但我如何使用純 javascript 來做到這一點？</p><pre class="lang-html prettyprint-override"> <ul id="wrapper"> <li>Answer 1</li> <li>Answer 2</li> <li>Answer 3</li> </ul></pre></div>
Jquery - 調暗整個頁面並淡化一個div元素
單擊 div 時，錨定 #Tag 將整個頁面向上移動
使用position absolute時如何使vue組件中的div占據整個屏幕？
切換2 div
相關標簽