个人中心
gpt4 book ai didi

javascript - 显示/隐藏嵌套 div

转载 作者：行者123 更新时间：2023-12-03 06:18:50 26 4
gpt4 key购买 nike

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

我正在构建一个网站，当单击上述项目之一时，该网站将具有主水平选项卡式菜单和辅助水平选项卡式菜单。在第二个选项卡式菜单之外，将有另一个子菜单，它会弹出链接，单击该链接后，将在右侧显示内容。如下图所示。

tabbed menu

为了尝试让逻辑正常工作，我构建了一些非常简单的测试页面来尝试显示和隐藏 div，但我似乎只能获得与第一个子菜单显示相同的效果。

因为(最终)这将是一个包含多个页面的大型网站，我已将第一个菜单组织在网站的根文件夹中，将子菜单组织在名为“pages”的子文件夹中，将子菜单组织在文件夹中称为“页面/资源页面”。

这是我的测试代码，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>

这是我的 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，你可能会遇到可读性方面的问题，所以我更喜欢纯 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

关于javascript - 显示/隐藏嵌套 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38958116/

26 4 0
文章推荐： android - Android， flavor ， flavor ， flavor 和 flavor
文章推荐： sql - 物化 View 与表 : What are the advantages?
文章推荐： youtube - 如何使用api v3在YouTube上用其他语言向视频添加标题和说明？
文章推荐： antlr4-无法将 Hello 加载为词法分析器或解析器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com