javascript - 当我使用 ajax 加载/拉取内容时，如何将 CSS 编码为 "change"？

Question

我有 4 个链接显示为图像。 a 标签在 CSS 中以小图显示，a:hover 以大图表示。我正在使用 ajax 加载每个链接所代表的内容。

http://www.avant-gardesalon.net/site/quality-products_copy.php

如何更改 CSS，以便在显示内容(用于相关链接)时，显示的图像是较大的图像？另外，一旦用户点击另一个链接，我该如何将之前的链接改回较小的图像？

Answer 1

这意味着，纯 css a:hover 设置不是答案，因为当鼠标移出或点击其他地方时，链接将恢复到正常状态。

你需要处理那个a的点击事件，比如(假设所有的a都有product类，把酒名作为div的id):

$("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 }

最后一点，与您的问题并没有太大关系，从语义上讲，您的 Wine 可以更好地使用无序列表 (ul) 来表示。