Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2013, 12:32
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

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

Я сделал на 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".
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2013, 14:09
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

Сообщение от Mukhtar
Как сделать, чтобы после обновления открывался нужный раздел
Серверный скрипт и есть?
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2013, 14:17
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

Сообщение от ksa Посмотреть сообщение
Серверный скрипт и есть?
Не совсем понимаю о чем Вы.
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2013, 14:41
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

Кто-то генерит контент страницы? Или это просто статичные ХТМЛ-файлы?
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2013, 14:53
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

Сообщение от ksa Посмотреть сообщение
Кто-то генерит контент страницы? Или это просто статичные ХТМЛ-файлы?
Это просто страничные ХТМЛ-файлы.
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2013, 14:55
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

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

Тогда у тебя только один вариант - писать выбор в куки, а потом их читать и "делать выводы"...
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2013, 15:16
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от ksa
Тогда у тебя только один вариант - писать выбор в куки, а потом их читать и "делать выводы"...
Нифига подобного. Хэш навигация в помощь. Кроме того, ее можно реализовать даже без скриптов, на чистом css! А скрипты уже как костыль для старых браузеров.
Ответить с цитированием
  #8 (permalink)  
Старый 28.02.2013, 15:18
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

Сообщение от danik.js
Хэш навигация в помощь.
Чё за зверь?
Ответить с цитированием
  #9 (permalink)  
Старый 28.02.2013, 16:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<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>
Ответить с цитированием
  #10 (permalink)  
Старый 28.02.2013, 17:18
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

Сообщение от 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>
Это все замечательно, но я сделал так, единственное не могу понять не кликает на нужный элемент

hash = document.location.hash;
if(hash!=''){
jQuery("ul li a[href='"+hash+"']").trigger('click');
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы скрипт работал только если текущий документ iframe? ruslan_mart Общие вопросы Javascript 10 14.01.2015 13:56
jCarousel - как сделать чтобы подсвечивался текущий элемент управления? cenzored jQuery 15 18.06.2012 14:11
КАК сделать чтобы кнопка PRINT не отображалась при печати?:?? xxxxx82 Элементы интерфейса 1 19.04.2011 14:58
HTML5 Как сделать, чтобы можно было двигать картинку мышью? Бобр Общие вопросы Javascript 2 18.06.2010 21:22