Question

嗨，我希望有人能提供帮助。

我建立一个网站，当点击上面的某个项目时，该网站将有一个主要的水平选项卡式菜单和一个辅助水平选项卡式菜单。在第二个选项卡菜单中，将有另一个子菜单，它会显示链接，一旦点击，将显示右侧的内容。图示如下所示。

为了尝试让逻辑工作，我已经构建了一些非常简单的测试页面来尝试显示和隐藏div，但我似乎只能得到相当于第一个显示的子菜单。

因为（最终）这将是一个包含多个页面的大型网站，我已经在网站的根文件夹中组织了第一个菜单，子菜单中的子菜单名为＆＃39; pages＆＃39;以及名为＆＃39; pages / resource_pages＆＃39;的文件夹中的子子菜单。

这是我的测试代码，1是顶级 - 在根文件夹中的nest.html

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

第二级代码 - 在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>

第三级代码 - pages / resource_pages子文件夹中的nest3.html

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

下面＆＃39;我的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";
}

有人能发现我做错了什么吗？谢谢你的兴趣。

Answer 1

乱搞很多js和html，你可能遇到有关可读性的问题，所以我更喜欢纯粹的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

我在onclick语句中遇到了问题：http://www.howtocreate.co.uk/referencedvariables.html

显示/隐藏嵌套的div

1 个答案: