Javascript Web应用布局--基于Web应用视图显示/隐藏Div元素
我正在尝试布局一个web应用程序。我的web应用程序的每个屏幕都是一个面板。我现在有以下面板:主页、关于、设置、游戏和结果。我一次只想显示一个面板。现在只有主面板应该显示,但我的代码不工作(所有面板现在都显示)。我错过了什么 jsFiddle:Javascript Web应用布局--基于Web应用视图显示/隐藏Div元素,javascript,Javascript,我正在尝试布局一个web应用程序。我的web应用程序的每个屏幕都是一个面板。我现在有以下面板:主页、关于、设置、游戏和结果。我一次只想显示一个面板。现在只有主面板应该显示,但我的代码不工作(所有面板现在都显示)。我错过了什么 jsFiddle: 无标题文件 window.onload=myOnloadFunc; 函数myOnloadFunc(){ var homePanel=document.getElementById(“homePanel”); var aboutPanel=documen
无标题文件
window.onload=myOnloadFunc;
函数myOnloadFunc(){
var homePanel=document.getElementById(“homePanel”);
var aboutPanel=document.getElementById(“aboutPanel”);
var settingsPanel=document.getElementById(“settingsPanel”);
var gamePanel=document.getElementById(“gamePanel”);
var resultsPanel=document.getElementById(“resultsPanel”);
//应用程序中的所有面板
var面板=[“主页面板”、“关于面板”、“设置面板”、“游戏面板”、“结果面板”];
//显示选定面板并隐藏所有其他面板
功能显示面板(面板){
对于(变量i=0;i
代码中有几个问题
这个
关键字。您使用它的方式引用了全局对象,即窗口面板中
//应用程序中的所有面板
变量面板=[homePanel,aboutPanel,settingsPanel,gamePanel,resultsPanel];
//显示选定面板并隐藏所有其他面板
功能显示面板(面板){
对于(变量i=0;i
为什么这么早就关闭标签?这是一个打字错误,正在编辑。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
</style>
<script>
window.onload = myOnloadFunc;
function myOnloadFunc() {
var homePanel = document.getElementById("homePanel");
var aboutPanel = document.getElementById("aboutPanel");
var settingsPanel = document.getElementById("settingsPanel");
var gamePanel = document.getElementById("gamePanel");
var resultsPanel = document.getElementById("resultsPanel");
// All panels in app
var panels = ["homePanel", "aboutPanel", "settingsPanel", "gamePanel", "resultsPanel"];
// Show selected panel and hide all other panels
function showPanel(panel) {
for (var i = 0; i < panels.length; i++) {
if (panel) {
// Show panel
this.style.display = "block";
} else {
// Hide
this.style.display = "none";
}
}
}
showPanel("homePanel");
}
</script>
</head>
<body>
<!-- homePanel -->
<div class="panel" id="homePanel">
Home panel
</div>
<!-- aboutPanel -->
<div class="panel" id="aboutPanel">
About panel
</div>
</body>
<!-- settingsPanel -->
<div class="panel" id="settingsPanel">
Settings panel
</div>
<!-- gamePanel -->
<div class="panel" id="gamePanel">
Game panel
</div>
<!-- resultsPanel -->
<div class="panel" id="resultsPanel">
Results panel
</div>
</body>
</html>
// All panels in app
var panels = [homePanel, aboutPanel, settingsPanel, gamePanel, resultsPanel];
// Show selected panel and hide all other panels
function showPanel(panel) {
for (var i = 0; i < panels.length; i++) {
var p = panels[i]
if (p === panel) {
// Show panel
// this referred to global object, i.e. window
p.style.display = "block";
} else {
// Hide
p.style.display = "none";
}
}
}
showPanel(homePanel);