JQuery Быстрый выбор продукта по ссылке

Question

Это будет трудно объяснить, но я буду стараться изо всех сил.

У меня есть страница с 3 делами, каждая из которых содержит информацию и кнопку заказа для каждого продукта. Посетитель может щелкнуть изображение продукта, и оно в основном скроет все элементы div, а затем покажет изображение, относящееся к изображению, на которое они нажали.

У меня есть боковая панель, которая работает глобально на всех страницах сайта, на которой есть «быстрые ссылки» на каждый продукт. Я хочу знать, есть ли способ, которым я могу связать их со страницей продукта, чтобы люди могли щелкнуть их с любой страницы сайта, и он откроет страницу продукта с продуктом, на который они нажали, уже выбранным и видимым.

Полагаю, это можно сделать с помощью # product1, # product2 и т. Д. В конце ссылок на страницу продукта, но я не совсем уверен, как этого достичь. У кого-нибудь есть идеи?

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

Answer 1

Вы хотите использовать якоря.

Итак, вы называете якорь внутри DIV.

<div id="product1">
<a name="product1">
</div>

Затем вы ссылаетесь на это с '#', как вы описываете. Используйте полный путь, если вы ссылаетесь с другой страницы, просто используйте # product1, если вы делаете это с той же страницы.

<a href="/path/to/page/#product1">

Теперь, как вы обнаружили, хитрый момент - это jQuery, который понимает, что вы запрашивали привязку при загрузке страницы. Этот код зависит от конструкции, подобной приведенной выше, где id элемента div совпадает с именем привязки. Небольшой фрагмент примера кода здесь для вызова метода show () в div с тем же именем, что и якорь, который был передан в URI.

$(document).ready(function() {
    var uri = document.location.toString();
    if (uri.match("#")) {
        anchor = uri.split("#")[1];
        $('#' + anchor).show();
    }
});