在div之间切换，它将在纯js中占据整个页面
我正在寻找一种具有多个<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回答
-
蓝山帝景
在我看来，您只是将样式应用于<div>要显示的样式，而实际上并没有隐藏其他样式。您是否尝试过display: none;向您要隐藏的div申请？我会在div可见的情况display下为div应用所需的样式，然后根据单击的内容将模式从更改none为block，反之亦然
随时随地看视频慕课网APP
相关分类
JavaScript