我正在寻找一种具有多个<div>元素的方法，这些功能可以在某些功能之间切换，<div>就好像它们是页面一样。我希望有一个“活动”页面，当<a>单击某些元素或单击时，有一种方法可以切换到另一个占据整个页面的div。在任何给定时间，只有一个这样的页面状<div>可见。我知道这可以在jquery中完成，例如使用data-role="page"divs的属性，但是我想知道如何在纯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> </body> </html>基本上有一个过渡到第二页，但此后将不起作用。我不确定在这里动态更改样式对象是否是一个好方法。
2 回答
蓝山帝景
TA贡献1843条经验 获得超7个赞
在我看来，您只是将样式应用于<div>要显示的样式，而实际上并没有隐藏其他样式。
您是否尝试过display: none;向您要隐藏的div申请？
我会在div可见的情况display下为div应用所需的样式，然后根据单击的内容将模式从更改none为block，反之亦然
添加回答
举报
0/150
提交
取消