#javascript #jquery #redirect
#javascript #jquery #перенаправление
Вопрос:
Я буду держать свой вопрос коротким для краткости. У меня есть страница (скажем, страница 1), на которой у меня есть 2 ссылки, прикрепленные к двум разным тегам привязки, и при нажатии на эти теги привязки я перенаправляю пользователя на страницу 2. Однако я хотел бы выделить (добавить класс ‘active’) для двух разных элементов списка на странице 2, что зависит от того, нажал ли пользователь на привязку 1 или 2 с предыдущей страницы. На данный момент первый тег li выделен с активным классом.
Это моя HTML-разметка на странице 1, где у меня есть теги привязки
<div class="landing-thumb">
<div class="view view-first">
<div class="mask">
<a id="link1" class="info">Click here</a>
</div>
</div>
</div>
<div class="landing-thumb">
<div class="view view-first">
<div class="mask">
<a id="link2" class="info">Click here</a>
</div>
</div>
</div>
JS для события щелчка
$('#link1').on('click', function () {
window.location = "/page2";
});
$('#link2').on('click', function () {
window.location = "/page2";
});
На странице 2 у меня есть список, который генерируется динамически (по умолчанию первый элемент в списке имеет класс ‘active’) (только идентификатор диапазона отличается для каждого элемента списка). Вот примерная разметка HTML
<ul id="menu" class="nav nav-pills">
<li class="active">
<a href="#">
<span id="spanLink1">List 1</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink2">List 2</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink3">List 3</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink4">List 4</span>
</a>
</li>
</ul>
Теперь то, чего я пытаюсь достичь здесь, если пользователь нажмет на link1 со страницы 1, он / она будет перенаправлен на страницу 2 с активным классом li, который имеет span id =»spanlink 3″, и при нажатии на link2 со страницы 1 активный класс li, который имеет span id="spanLink4"
Комментарии:
1. вы пробовали использовать локальное хранилище браузеров?
2. зачем мне localStorage или cookies для этой проблемы? Я не пытаюсь сохранить URL-адрес или что-то подобное.
3. Вы пытаетесь сохранить информацию при перезагрузке страницы, не так ли?
4. Я думаю, что вы не можете (если не используете серверную часть) сохранять информацию (даже состояние / класс элемента) при перезагрузке, не сохраняя эту информацию где-либо либо в хранилище браузера (cookie / local), либо на сервере..
5. Нет. Я просто пытаюсь сделать соответствующий элемент списка активным после нажатия на ссылку привязки со страницы 1, вместо того, чтобы показывать первую ссылку по умолчанию с активным классом на странице 2. На странице 2 перезагрузки мне все равно, вернется ли активный класс к первому активному элементу списка по умолчанию. Таким образом, сохранение информации в local / cookies не может быть и речи
Ответ №1:
Добавьте некоторый хэш-тег в свой URL
$('#link1').on('click', function () {
window.location = "/page2#link1";
});
$('#link2').on('click', function () {
window.location = "/page2#link2";
});
И на этой странице получите этот хэш-тег
window.location.hash или также используйте php-код и добавьте к нему класс accordint
Комментарии:
1. Это не принесет никакой пользы моей проблеме. Кроме того, мое веб-приложение не основано на PHP.
2. мой друг, я просто меняю код javascript и здесь использую window. Расположение. хэш при загрузке страницы и наслаждайтесь, это вернет вам данные хэш-тега
3. Если я чего-то не упускаю, это действительно выглядит как хорошее решение.. используйте хэштег между страницами.. это не php .. в любом случае, я думаю, что это должно быть — window . location.href
4. конечно, я знаю, что это не PHP 🙂 Я просто отвечал на ответ, когда Джейн упомянул об использовании PHP-кода. Ну, у меня нет никакого идентификатора в списке (на странице 2). Единственное, что отличается, это идентификатор диапазона, заключенный в тег li
5. да, конечно, вы можете использовать window. location.href.split(‘#’).pop() чтобы получить данные после хэш-тега, затем найдите идентификатор на своей странице, затем добавьте class $(‘#spanid’).addClass(‘что угодно’);