Question

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

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

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

Answer 1

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

你需要处理a上的click事件，例如（假设所有a都有类产品，并将wine name作为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 }

最后一点与你的问题没有关系的是，在语义上你的葡萄酒可以更好地使用无序列表（ul）来表示。

当我使用ajax加载/提取内容时，如何编写CSS以“更改”？

1 个答案: