ネストされたdivを表示/非表示

こんにちは。ネストされたdivを表示/非表示

私は、上記の項目のいずれかをクリックすると、メインの水平タブ付きメニューとセカンダリの水平タブ付きメニューを持つWebサイトを構築しています。 2番目のタブ付きメニューを消すと、別のサブメニューが表示され、リンクをクリックすると、右側のコンテンツが表示されます。図形的にこれを以下に示す。

ロジックは、私はdiv要素を示すと隠し試していくつかの非常に簡単なテストページを構築してきましたが、私は唯一の最初のサブメニューかを示す同等のものを得ることができるように見える作業しようとすると、取得します。

これは複数のページがある大きなサイトであるため、サイトのルートフォルダに最初のメニュー、「ページ」と呼ばれるサブフォルダのサブメニュー、 'pages/resource_pages'というフォルダにあります。ページ内nest2.html

<body> 
<div id="div2"> <a href="#" title="Nest2" class="level2Hyperlink" onclick="openLevel3(event,'nest2')">Nest 2 - located in root/pages folder</a> </div> 
<div id="nest2" class="level2HiddenDiv"> 
    <script> 
$("#nest2").load("pages/resource_pages/nest3.html"); 
</script> 
</div> 
</body>

サードレベルのコードをフォルダ -

<body onload="openLevel2();"> <!-- done to initially hide unwanted divs --> 
<div id="home">Nested Div Test</div> 
</br> 
<div id="div1"> <a href="#" title="Nest1" class="level1Hyperlink" onclick="openLevel2(event,'nest1')">Nest 1 - located in root folder</a> </div> 
<div id="nest1" class="level1HiddenDiv"> 
    <script>$("#nest1").load("pages/nest2.html");</script> 
</div> 
</body>

セカンドレベルのコードは、ルートフォルダ内nest.html -

は、ここに私のテストコード、1トップレベルです - nest3.htmlページに/サブフォルダresource_pagesここ

<body> 
<div id="div3"> <a href="#" title="Nest3" class="level3Hyperlink" onclick="openLevel4(event,'nest3')">Nest 3 - located in root/pages/resource_pages folder</a> </div> 
<div id="nest3" class="level3HiddenDiv"> 
    <script> 
$("#nest3").load("ca_nearby.html"); 
</script> 
</div> 
</body>

」私のjavascriptの

function openLevel2(evt, scriptName) { 
    // Declare all variables 
    var i, level1Hyperlink, level1HiddenDiv; 

    // Get all elements with class="level1HiddenDiv" and hide them 
    level1HiddenDiv = document.getElementsByClassName("level1HiddenDiv"); 
    for (i = 0; i < level1HiddenDiv.length; i++) { 
     level1HiddenDiv[i].style.display = "none"; 
    } 

    // Get all elements with class="level1Hyperlink" and remove the class "active" 
    level1Hyperlink = document.getElementsByClassName("level1Hyperlink"); 
    for (i = 0; i < level1Hyperlink.length; i++) { 
     level1Hyperlink[i].className = level1Hyperlink[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the link that opened the tab 
    document.getElementById(scriptName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

// Script for showing resource letter menu tabs 
function openLevel3(evt, resourceName) { 
    // Declare all variables 
    var i, level2Hyperlink, level2HiddenDiv; 

    // Get all elements with class="level2Hyperlink" and hide them 
    level2HiddenDiv = document.getElementsByClassName("level2HiddenDiv"); 
    for (i = 0; i < level2HiddenDiv.length; i++) { 
     level2HiddenDiv[i].style.display = "none"; 
    } 

    // Get all elements with class="level2Hyperlink" and remove the class "active" 
    level2Hyperlink = document.getElementsByClassName("level2Hyperlink"); 
    for (i = 0; i < level2Hyperlink.length; i++) { 
     level2Hyperlink[i].className = level2Hyperlink[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the link that opened the tab 
    document.getElementById(resourceName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

// Script for showing resource letter sub menu tabs 
function openLevel4(evt, letterName) { 
    // Declare all variables 
    var i, level3Hyperlink, level3HiddenDiv; 

    // Get all elements with class="level3HiddenDiv" and hide them 
    level3HiddenDiv = document.getElementsByClassName("level3HiddenDiv"); 
    for (i = 0; i < level3HiddenDiv.length; i++) { 
     level3HiddenDiv[i].style.display = "none"; 
    } 

    // Get all elements with class="level3Hyperlink" and remove the class "active" 
    level3Hyperlink = document.getElementsByClassName("level3Hyperlink"); 
    for (i = 0; i < level3Hyperlink.length; i++) { 
     level3Hyperlink[i].className = level3Hyperlink[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the link that opened the tab 
    document.getElementById(letterName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
}

私が間違っていることを誰でも見分けることができますか？ありがとうございます。たくさんのJSとHTMLをいじり

出典

2016-08-15 Roger W

正確には何が動作しないのですか？ –

ありがとうございました。ページが正常に読み込まれ、2番目のリンクへのリンクが正常に動作し、その後は動作しません。 –

まず、コードをデバッグします。アラートを複数の行に追加し、期待どおりのものかどうかを確認します。ブラウザのコンソールも見てください。次に、コードを小さくして、ブラウザの読み込み時間と可読性を向上させます。 –

、あなたが読みやすさに関わる問題に実行することができますので、私は純粋なJSのソリューションを好むだろう、ウィッヒは、それが読みやすくなります/より良いデバッグ：

var structure={ 
    name:"level1", 
    links:[ 
     { 
     name:"level2-1", 
     links:[ 
        { 
         name:"level3-1", 
         links:[] 
        }, 
        { 
        name:"level3-2", 
        links:[] 
        } 
        ] 
      }, 
      { name:"level2-2", ... 
      } 
     ] 
    }; 

function show(element){ 
//add the name to header 
document.GetElementById("header").innerHTML=element.name; 
linkcontainer=document.getElementById("linkcontainer"); 
linkcontainer.innerHTML=""; 
counter=0; 
element.links.forEach(function(link){ 
    l=document.createElement("span"); 
    l.onclick=(function(element,counter){ 
     //this should create an onclick element 
     return function(){show(element.links[counter])}; 
    })(element,counter); 
    l.innerHTML=element.links[counter].name; 
    linkcontainer.appendChild(l); 
    counter++; 
    } 
    } 
window.onload=function(){show(structure);} 
</script> 
<div id="header">should contain name</header> 
<div id="linkcontainer">should contain links</div>

これは、作成する必要があります：

Level1 
Level2.1 
Level2.2

そして、あなたはレベル2.1をクリックした場合：私は広報を持っていた

Level2.1 
Level3.3 
Level3.4

obclms onclickステートメント：http://www.howtocreate.co.uk/referencedvariables.html

出典

2016-08-16 17:38:08

Jonas、あなたの両方の投稿が私に背を向けて私のことを考えさせるまで私はJavaScriptをやったので、TBHは約3年ほど前ですが、私はこれを今作業したと思います。私は、私はすべてのjavascriptをhtmlファイルから移動し、ベースのindex.htmlファイルがロードされたときに読み込まれる別のjsファイルに移動する必要があると思います。その後、ロードコマンドによってロードされる後続のファイルで使用できるようになります。もう一度ありがとう。 –

@Roger W：心配はいりません。しかし、jsをファイルに移動してもそれほど変わらないでしょう... –

ネストされたdivを表示/非表示

答えて

関連する問題