How do I code CSS to "change" when I load/pull content using ajax?

Question

I have 4 links that are being displayed as an image. The a tag is displayed in CSS by a small image and the a:hover is represented by a larger image. I am using ajax to load the content that each of these links represent.

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

How do change the CSS so that when the content (for the related link) is displayed, the image displayed is the larger image? Also, once the user clicks on another link, how do I change the previous link back to the smaller image?

Answer 1

That means, pure css a:hover setting is not the answer, coz when mouse move out or click other places, the link will back to its normal state.

You need to handle the click event on that a, for example (suppose all a have the class product, and put the wine name as the id of the 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...
});

and the html can be

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

so that in your css

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

One last bit, which is not really related to your question, is that semantically your wines could better use unordered-list (ul) to represent.