Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как сделать, чтобы после обновления открывался нужный раздел (https://javascript.ru/forum/events/35996-kak-sdelat-chtoby-posle-obnovleniya-otkryvalsya-nuzhnyjj-razdel.html)

Mukhtar 28.02.2013 13:32

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

Я сделал на 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 28.02.2013 15:09

Цитата:

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

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

Mukhtar 28.02.2013 15:17

Цитата:

Сообщение от ksa (Сообщение 237939)
Серверный скрипт и есть?

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

ksa 28.02.2013 15:41

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

Mukhtar 28.02.2013 15:53

Цитата:

Сообщение от ksa (Сообщение 237953)
Кто-то генерит контент страницы? Или это просто статичные ХТМЛ-файлы?

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

ksa 28.02.2013 15:55

Цитата:

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

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

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

danik.js 28.02.2013 16:16

Цитата:

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

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

ksa 28.02.2013 16:18

Цитата:

Сообщение от danik.js
Хэш навигация в помощь.

Чё за зверь?

danik.js 28.02.2013 17:04

<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 28.02.2013 18:18

Цитата:

Сообщение от danik.js (Сообщение 237983)
<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');
}


Часовой пояс GMT +3, время: 18:46.