Wie programmiere ich CSS, um "zu ändern", wenn ich Inhalt mit Ajax lade/ziehe?

Question

Ich habe 4 Links, die als Bild angezeigt werden. Das a-Tag wird in CSS durch ein kleines Bild angezeigt und der a: hover wird durch ein größeres Bild dargestellt. Ich verwende Ajax, um den Inhalt zu laden, den jeder dieser Links darstellt.

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

Wie die CSS ändern, so dass, wenn der Inhalt (für den entsprechenden Link) angezeigt wird, zeigte das Bild der größere Bild ist? Wenn der Benutzer auf einen anderen Link klickt, wie ändere ich dann den vorherigen Link zurück zum kleineren Bild?

Answer 1

Das bedeutet, reine css a: Hover-Einstellung ist nicht die Antwort, denn wenn die Maus ausziehen oder klicken Sie auf andere Orte, wird die Verbindung in den Normalzustand zurück.

Sie müssen das Click-Ereignis auf diesem ein, zum Beispiel behandeln (nehme eine ganze Klasse Produkt haben, und setzen Sie den Wein Namen wie die ID des 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... 
}); 

und den HTML-Code kann sein

<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 dass in Ihrem css

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

Ein letztes Bit, die auf Ihre Frage nicht wirklich verwandt ist, i s dass Ihre Weine semantisch besser ungeordnete Liste (ul) darstellen könnten.