Отображение/Скрытие вложенных divs

Привет, и я надеюсь, что кто-то может помочь.Отображение/Скрытие вложенных divs

Я создаю веб-сайт, который будет иметь основное горизонтальное меню с вкладками и дополнительное горизонтальное меню с вкладками, когда один из вышеперечисленных элементов будет нажат. Во втором меню с вкладками появится другое подменю, в котором появляются ссылки, где, после щелчка, будет показывать контент справа. Изобразительно это показано ниже.

Чтобы попытаться получить логику работать я построил несколько очень простых страниц тестов, чтобы попробовать, показывая и скрывая дивы, но я, кажется, только для того, чтобы получить эквивалент первого показа подменю.

Потому что (в конечном счете) это будет большой сайт с несколькими страницами. Я организовал первое меню в корневой папке сайта, подменю в подпапке под названием «страницы» и подменю в в папке «pages/resource_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>

Второй уровень кода - 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>

Третий код уровня - 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"; 
}

Может ли кто-нибудь определить, что я делаю неправильно? Спасибо за ваш интерес.

источник

2016-08-15 Roger W

Что именно не работает? –

Спасибо, Jonas. Страница загружается отлично, ссылка на вторую ссылку работает нормально, после чего она не работает. –

Сначала отлаживайте свой код. Добавляйте оповещения в нескольких строках и наблюдайте, если это так, как вы ожидали. Также загляните в консоль браузеров. Затем уменьшите свой код, чтобы улучшить время загрузки браузера и его читаемость. –

Мессинг вокруг с много 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

Я имел пр oblems с оператором onclick: http://www.howtocreate.co.uk/referencedvariables.html

источник

2016-08-16 17:38:08

Еще раз спасибо. Jonas, вы немного драгоценный камень, так как ваши сообщения заставляют меня сидеть сложа руки и думать о том, что я вплоть до. TBH было около 3 лет назад, так как я сделал какой-либо javascript, но я думаю, что теперь я это обработал. Я думаю, что мне нужно переместить весь мой javascript из html-файла и перенести его в отдельный файл js, где он должен быть прочитан при загрузке базового файла index.html. После этого он станет доступен для последующих файлов, которые загружаются через команды загрузки. Еще раз спасибо. –

@Roger W: не беспокойтесь. Однако перемещение js в файл не сильно изменится ... –

Отображение/Скрытие вложенных divs

ответ

Смежные вопросы