Задать вопрос
@k3SerJ
html

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

Здравствуйте, есть 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. Подскажите, как сделать так, чтоб переходя с первой страницы на вторую подгружался нужный шаблон?
  • Вопрос задан
  • 64 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@k3SerJ Автор вопроса
может кому пригодится
$(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');
  }
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@jasper-blondin
На второй странице у Вас все работает, скорее всего, благодаря скриптам, обрабатывающим клики. Отсюда вытекает ответ на вопрос: необходимо на второй странице дописать эти самые скрипты таким образом, чтобы они обрабатывали хеш запроса при загрузке страницы, и в зависимости от этого хеша происходило переключение на нужный блок (шаблон).
Ответ написан
4 комментария
4 комментария
@Andreaszak
1. При клике на ссылку на первой странице - записывайте в переменную в localstorage нужную часть значения артибута href, например, "#go2"
2. При переходе на вторую страницу извлекайте переменную из localstorage и ищите элемент с классом "tab-pane" и id равным значению извлеченной переменной
3. Присваивайте ему класс "active", предварительно убирая "active" у других "tab-pane"
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция-сборка сайта на ModX
16 апр. 2024, в 18:09
45000 руб./за проект
Написать скрипт на Python для уникализации и склейки видео
16 апр. 2024, в 17:36
15000 руб./за проект
Перенести полную копию сайта без доработок с opencart
16 апр. 2024, в 17:32
1000 руб./в час
Ещё заказы