0

Webアプリをレイアウトしようとしています。私のWebアプリの各画面はパネルです。現在、ホーム、アバウト、設定、ゲーム、結果のパネルがあります。一度に1つのパネルだけを表示したい。現在、ホームパネルのみが表示されているはずですが、コードが機能していません（すべてのパネルが現在表示されています）。私は何が欠けていますか？

jsFiddle： http: //jsfiddle.net/bNzVA/

<!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>
4

1 に答える 1

1

コードにいくつかの問題がありました。

  1. thisキーワード。使用方法は、グローバルオブジェクト、つまりウィンドウを参照していました。
  2. パネルを繰り返しましたが、何にも割り当てませんでした。
  3. ノードを格納するpanels
  4. パネルノードをshowPanelに渡すノードと比較します

私はあなたのフィドルを更新しました：http：//jsfiddle.net/bNzVA/2/

// 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);
于 2013-01-29T04:59:27.030 に答える