Ссылка на раздел сайта, который скрыт функцией скрытия / отображения JavaScript

Question

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

Вот JS:

   var ids=new Array('section1','section2','section3','section4');

function switchid(id, el){  
    hideallids();
    showdiv(id);

    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
          li.className = "";
          li = li.nextSibling;
        }
    }
    el.parentNode.className = "active";
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

И HTML

<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">One</a></li>
<li><a onclick="switchid('section2', this);return false;">Two</a></li>
<li><a onclick="switchid('section3', this);return false;">Three</a></li>
<li><a onclick="switchid('section4', this);return false;">Four</a></li>
</ul>

<div id="section1"  style="display:block;">   
<div id="section2" style="display:none;">  
<div id="section3" style="display:none;">  
<div id="section4" style="display:none;">

Я не смог придумать способ ссылки на определенный раздел. Возможно ли вообще этим методом?

Спасибо!

Answer 1

Вы можете запустить некоторый скрипт при загрузке вашей страницы, который проверяет хэш URL и загружает соответствующий раздел:

// on page load
var sectionid = /section\d/i.exec(location.hash);
if (sectionid) {
    var link = document.getElementById(switchid[0] +"_link");
    switchid(sectionid[0], link);
}

и добавьте идентификатор к своим ссылкам:

<li><a id="section2_link" onclick="switchid('section2', this);return false;">Two</a></li>

Answer 2

Функциональность HTML полностью не зависит от CSS. Поэтому следующий код всегда будет работать, даже если для заданного раздела задано отображение: нет.

<a href="#section3">Link to section3</a>