Как я могу перенаправить на определенный div на странице, которая была скрыта и теперь должна быть показана

Question

Мой HTML:

<div class="menu">
    <a href="javascript:displayonediv('sections1');">Energy Profile</a>
    <a href="javascript:displayonediv('sections2');">Statistics</a>
</div>

<div name="sections" id="sections1">
    .... some stuff ....
</div>
<div name="sections" id="sections2">
    .... some stuff ....
</div>

Мой код JavaScript:

function displayonediv(choosendiv) {
    $('div[name|="sections"]').each(function(index) {
        if ($(this).attr("id") == choosendiv) {
            $(this).show(200);
        }
        else {
            $(this).hide(200);
        }
    });
}

По умолчанию div с id=sections1 отображается при загрузке страницы, а div с id=sections2 скрыто. В моем контроллере после отправки формы я перенаправляю на div с id=sections2. Однако я не могу перенаправить на эту страницу и загрузить этот конкретный div (id=sections2). Я пытался использовать теги привязки, но мои усилия были напрасны.

Answer 1

Я думаю, вы должны сделать что-то вроде этого:

Скрыть все разделы в CSS, чтобы они даже не были видны во время загрузки:

#sections1, #sections2 {
    display: none;
}

CSS не является обязательным. Используйте эту простую функцию для динамического отображения и скрытия:

function displayonediv(chosendiv) {
    //Make sure all other divs are really hidden if there are subsequent calls:
    $("div[name^=sections]").hide(200);
    $("#" + chosendiv).show(200);
}

Также:

Если это не сработает, и вы можете изменить этот ужасный HTML, измените HTML следующим образом.

<div class="menu">
    <a class="section" href="#sections1">Energy Profile</a>
    <a class="section" href="#sections2">Statistics</a>
</div>

<div class="sections" id="sections1">
    .... some stuff ....
</div>
 <div class="sections" id="sections2">
    .... some stuff ....
</div>

И есть этот JS:

$("a.section").click(function(event) {
    $("div.sections").hide(200);
    $($(this).attr('href')).show(200);
});

Как и в большинстве вещей в jQuery, весь ваш код должен быть $(function(){ /*here*/});.

Чтобы загрузить раздел при загрузке страницы:

$(function() {
    $(window.location.hash).show(200);
});

Answer 2

Попробуйте удалить | после имени и заменить его на $ или оставьте его без.Я бы даже удалил часть имени из div и добавил бы вместо них класс и использовал бы $('.sections').each().