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');
}

Mukhtar 28.02.2013 20:39
Если кто сможет помочь, буду благодарен. )))

рони 28.02.2013 22:50
Mukhtar,
посмотрите тут

Mukhtar 01.03.2013 01:41
Цитата:
Сообщение от рони (Сообщение 238034)
Mukhtar,
посмотрите тут
Спасибо, Рони, но я не силен в таких вещах ))... С этим недавно столкнулся. Просто осталась одна строка, ее не могу дописать, как не пытался, не смотрел мануалы, не выходит. Я определяю после обновления страницы с помощью ХЭШа на какую кнопку надо нажать, но никак не выходит. :help:

danik.js 01.03.2013 01:49
В свойстве href ссылок хранится полный адрес, а не тот что указан в атрибуте href. Однако я не понимаю почему поиск идет по свойству а не атрибуту. Так или иначе, исправляется "ul li a[href$='"+hash+"']"

Mukhtar 01.03.2013 02:05
Цитата:
Сообщение от danik.js (Сообщение 238083)
В свойстве href ссылок хранится полный адрес, а не тот что указан в атрибуте href. Однако я не понимаю почему поиск идет по свойству а не атрибуту. Так или иначе, исправляется "ul li a[href$='"+hash+"']"
:agree: Видать по этому и не нажимает. А как мне по аттрибуту найти? В принципе я так немного понял, во первых нужно ссылку в ХЭШе привести в порядок. То есть hash.replace("!/","");. Чтобы получить допустим #home вместо #!/home. А вот как по аттрибуту нажатие сделать, вот тут я в тупике.

рони 01.03.2013 02:14
Цитата:
Сообщение от Mukhtar
А вот как по аттрибуту нажатие сделать
 
jQuery("ul li a[href='"+hash+"']").click()

а просто клик разве неработает

Mukhtar 01.03.2013 02:17
Цитата:
Сообщение от рони (Сообщение 238086) 
jQuery("ul li a[href='"+hash+"']").click()

а просто клик разве неработает
Не работает, может срабатывает, но элемент скорее всего не находит. Хотя нет, алертом вывел, находит... Даже не знаю, почему не кликает?

danik.js 01.03.2013 02:22
Я надеюсь click() вызывается уже после того, как обработчик клика навешан?

Mukhtar 01.03.2013 02:30
Цитата:
Сообщение от danik.js (Сообщение 238088)
Я надеюсь click() вызывается уже после того, как обработчик клика навешан?
:yes: Да... Я экспериментировал и ставил и до и после

Deff 01.03.2013 02:32 
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>
 section[id]{
  display:none;
  position:absolute;
 }
</style>
<ul class="nav nav-pills">
  <li  data-section="#home">
    <a href="#home">Продукты</a>
  </li>
  <li  data-section="#about"><a href="#about">О компании</a></li>
  
</ul>
<section id="home">
FIRST PAGE
</section>
<section id="about">
SECOND PAGE
</section>


<script>
	var hash = location.hash
	var menu = $('.nav.nav-pills');
$('li',menu).find('a[href^="#"]').each(function() {
	var S = $(this).attr('href');
	if(S&&hash&&S.indexOf(hash)!=-1){$(hash).addClass("active").fadeIn(500);hash='find';return false;}
});
	if(hash!='find')$("#home").addClass("active").fadeIn(500);

$('a',menu).on("click",function() {
	$("section:visible").removeClass("active").fadeOut(700);
	var id='#'+this.href.split('#')[1];
	$(id).addClass("active").fadeIn(700);

});
</script>

рони 01.03.2013 02:33
Mukhtar, у меня всё ок!
<!DOCTYPE HTML>
<html>
    
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
            
        </script>
        <script type="text/javascript">
            $(function () {

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

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

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

                hash = document.location.hash;
                if (hash != '') {
                    $("ul li a[href='" + hash + "']").click();
                }
            });
        </script>
    </head>
    
    <body>
        <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>
    </body>

</html>

Mukhtar 01.03.2013 02:38
Цитата:
Сообщение от рони (Сообщение 238091)
Mukhtar, у меня всё ок!
<!DOCTYPE HTML>
<html>
    
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
            
        </script>
        <script type="text/javascript">
            $(function () {

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

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

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

                hash = document.location.hash;
                if (hash != '') {
                    $("ul li a[href='" + hash + "']").click();
                }
            });
        </script>
    </head>
    
    <body>
        <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>
    </body>

</html>
:dance: Всегда поражаюсь. Каждый раз когда обращаюсь на этом форуме, получаю ответ.

Действительно, это из за кэша браузера )))... Извиняйте, если мучил долго.
Спасибо большущее.

Deff 01.03.2013 02:48
:) А пост 20 не подошел ?

Mukhtar 01.03.2013 02:50
:no:
Цитата:
Сообщение от Deff (Сообщение 238093)
:) А пост 20 не подошел ?
;) Честно, может быть и подошел, только я не такой ас ))) как форумчане тут. )))

danik.js 01.03.2013 03:34
9 пост - самый дзен ) . Работает даже с отключеной жабаскриптой ) Хотя кому это интересно )


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