Как я могу кодировать CSS, чтобы «изменить», когда я загружаю / извлекаю контент, используя ajax?

Question

У меня есть 4 ссылки, которые отображаются в виде изображения. Тег отображается в CSS маленьким изображением, а курсор a: представлен большим изображением. Я использую ajax для загрузки контента, который представляет каждая из этих ссылок.

http://www.avant -gardesalon.net / сайт / качество products_copy.php

Как изменить CSS таким образом, чтобы при отображении содержимого (для связанной ссылки) отображаемое изображение было более крупным? Кроме того, как только пользователь нажимает на другую ссылку, как мне изменить предыдущую ссылку на уменьшенное изображение?

Answer 1

Это означает, что чистая настройка css a: hover не является ответом, поскольку, когда мышь перемещается или щелкает в других местах, ссылка возвращается в свое нормальное состояние.

Вам нужно обработать событие click для этого a, например (предположим, что у всех a есть продукт класса, и поставить имя вина в качестве идентификатора div):

$("a.product").click(function(e)
{
    e.preventDefault(); // So that the link is only handled by the following code without default action
    $("a.product").removeClass("active"); // Remove all other "active" products, ie, back into smaller image size

    var name = $(this).parent.attr("id");
    $(this).addClass("active"); // set the selected item to be "active" or larger image size in your case
    // ajax logics here...
});

и HTML может быть

<div id="wineName1"><a class="product">...</a></div>
<div id="wineName1"><a class="product">...</a></div>
<div id="wineName1"><a class="product">...</a></div>

так что в твоем css

#wineName1 {...}
#wineName1 active { // you can then target the larger image like this here }

Последний момент, который на самом деле не связан с вашим вопросом, заключается в том, что семантически ваши вина могут лучше использовать неупорядоченный список (ul) для представления.