Как реализовать переход по якорю?

Question

[Сергей]

Здравствуйте, есть 2 страницы, на одной находятся просто ссылки:

<a href="page.html#go1">Перейти1</a>
<a href="page.html#go2">Перейти2</a>
<a href="page.html#go3">Перейти3</a>

а на другой странице вот такой код:

<li role="presentation" class="active"><a h ref="#go1" role="tab" data-toggle="tab"><i class="icon-1"></i>Перейти1</a></li>
<li role="presentation"><a h ref="#go2" role="tab" data-toggle="tab"><i class="icon-2"></i>Перейти2</a></li>
<li role="presentation"><a h ref="#go3" role="tab" data-toggle="tab"><i class="icon-3"></i>Перейти3</a></li>

<div role="tabpanel" class="tab-pane active" id="go1">{include file="/pages/1.tpl"}</div>
<div role="tabpanel" class="tab-pane" id="go2">{include file="/pages/2.tpl"}</div>
<div role="tabpanel" class="tab-pane" id="go3">{include file="/pages/3.tpl"}</div>

Так вот, когда я нахожусь на второй странице и нажимаю на ссылки там, то по нужной ссылке подгружается нужный шаблон с его содержимым, а когда я пытаюсь перейти с первой страницы на вторую, то на второй странице активным всегда остаётся содержимое шаблона с классом active. Подскажите, как сделать так, чтоб переходя с первой страницы на вторую подгружался нужный шаблон?

Answer 1

[Сергей]

может кому пригодится

$(document).ready(function(){
  var text = window.location.href;
  var regex = /#(\w+)/gi;
  match = regex.exec(text);
  if(match)
  {
    $('.tab-pane').removeClass('in active');
    $('#'+match[1]).addClass('in active');
  }
});

Answer 2

[Илья]

На второй странице у Вас все работает, скорее всего, благодаря скриптам, обрабатывающим клики. Отсюда вытекает ответ на вопрос: необходимо на второй странице дописать эти самые скрипты таким образом, чтобы они обрабатывали хеш запроса при загрузке страницы, и в зависимости от этого хеша происходило переключение на нужный блок (шаблон).

Comments

[Сергей]

а может есть какой универсальный скрипт для этого?

[Илья]

k3SerJ, да, есть. Называется jQuery. Отлично справится с задачей.

[Сергей]

Илья, так может вы поможете кодом?

[Илья]

k3SerJ, в данный момент я не принимаю заказы. Но Вы всегда можете найти исполнителя на фрилансе.
Хотя я рекомендовал бы Вам самостоятельно разобраться в задаче. Она довольно простая.
Вам необходимо изучить следующие вопросы:
- чтение и парсинг URL-адреса посредством Javascript
- управление DOM-структурой
- ожидание загрузки DOM-дерева
Каждая из этих тем займет у Вас не более 10 минут.

Answer 3

[Andreaszak]

1. При клике на ссылку на первой странице - записывайте в переменную в localstorage нужную часть значения артибута href, например, "#go2"
2. При переходе на вторую страницу извлекайте переменную из localstorage и ищите элемент с классом "tab-pane" и id равным значению извлеченной переменной
3. Присваивайте ему класс "active", предварительно убирая "active" у других "tab-pane"