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

[Mukhtar]

Добрый день, Форумчане!

Я сделал на jQuery переходы по разделам сайта. Вот код

jQuery("#home").fadeIn(500);

jQuery("ul li").on("click", function() {
    var id = jQuery(this).data("section");
	var elem = jQuery(this);

    jQuery("section:visible").fadeOut(function() {
		jQuery("ul li").removeClass("active");
       jQuery(id).fadeIn();
    	elem.addClass("active");
	});
});

HTML

<ul class="nav nav-pills">
  <li class="active" data-section="#home">
    <a href="#home">Продукты</a>
  </li>
  <li class="" data-section="#about"><a href="#about">О компании</a></li>
  
</ul>
<section id="home">
FIRST PAGE
</section>
<section id="about">
SECOND PAGE
</section>

Все работает прекрасно, но вот после обновления не могу сделать, чтобы открывался раздел, который был активен до обновления. То есть если я был в section id="about", то после обновления, он все равно переходит на section id="home".

[ksa]

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

Серверный скрипт и есть?

[Mukhtar]

Серверный скрипт и есть?

Не совсем понимаю о чем Вы.

[ksa]

Кто-то генерит контент страницы? Или это просто статичные ХТМЛ-файлы?

[Mukhtar]

Кто-то генерит контент страницы? Или это просто статичные ХТМЛ-файлы?

Это просто страничные ХТМЛ-файлы.

[ksa]

Это просто страничные ХТМЛ-файлы.

Статичные...

Тогда у тебя только один вариант - писать выбор в куки, а потом их читать и "делать выводы"...

[danik.js]

Тогда у тебя только один вариант - писать выбор в куки, а потом их читать и "делать выводы"...

Нифига подобного. Хэш навигация в помощь. Кроме того, ее можно реализовать даже без скриптов, на чистом css! А скрипты уже как костыль для старых браузеров.

[ksa]

Хэш навигация в помощь.

Чё за зверь?

[danik.js]

<style>
    #pages div + div {
        display: none;
    }
    #pages div{
        position: absolute;
        background: #fff;
    }
    #pages div:target{
        display: block;
    }
</style>
<ul id="menu">
    <li><a href="#home">Главная</a></li>
    <li><a href="#news">Новости</a></li>
</ul>
<div id="pages">
    <div id="home">Показываем контент главной</div>
    <div id="news">Показываем другую страницу</div>
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
    function switchPage(page) {
        $('#pages > div').not('#' + page).fadeOut();
        $('#' + page).hide().fadeIn();
    }
    $('#menu a').click(function(e){
        e.preventDefault();
        location.hash = this.hash;
        switchPage(this.hash.replace('#', ''));
    });
    switchPage(location.hash.replace('#','') || 'home');
</script>

[Mukhtar]

<style>
    #pages div + div {
        display: none;
    }
    #pages div{
        position: absolute;
        background: #fff;
    }
    #pages div:target{
        display: block;
    }
</style>
<ul id="menu">
    <li><a href="#home">Главная</a></li>
    <li><a href="#news">Новости</a></li>
</ul>
<div id="pages">
    <div id="home">Показываем контент главной</div>
    <div id="news">Показываем другую страницу</div>
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
    function switchPage(page) {
        $('#pages > div').not('#' + page).fadeOut();
        $('#' + page).hide().fadeIn();
    }
    $('#menu a').click(function(e){
        e.preventDefault();
        location.hash = this.hash;
        switchPage(this.hash.replace('#', ''));
    });
    switchPage(location.hash.replace('#','') || 'home');
</script>

Это все замечательно, но я сделал так, единственное не могу понять не кликает на нужный элемент

hash = document.location.hash;
if(hash!=''){
jQuery("ul li a[href='"+hash+"']").trigger('click');
}