Avatar billede nickyc Nybegynder
21. januar 2009 - 10:41 Der er 9 kommentarer

skift baggrundsfarve ved klik

Mit problem er at når jeg trykker på mit link, så skifter den baggrunds farve til rød, når jeg så trykker på et andet link skal den skifte tilbage til hvid, men samtidig gøre baggrundsfarven rød ved det link jeg klikkede på...

Jeg har følgende:
<a href="#" id="gallink1" onClick="toggleGallery(1); return false;">1</a>
<a href="#" id="gallink2" onClick="toggleGallery(1); return false;">1</a>
<a href="#" id="gallink3" onClick="toggleGallery(1); return false;">1</a>
<a href="#" id="gallink4" onClick="toggleGallery(1); return false;">1</a>


Min funktion ser sådan ud:

function toggleGallery(img_id) {
    i = 1;
    while(cat = document.getElementById("gal_img" + i)) //forudsætter at det starter med 1 og alle tal er brugt
    cat.style.display = document.getElementById("imgtxt" + i++).style.display = "none";
    document.getElementById("gal_img" + img_id).style.display = "block";
    document.getElementById("imgtxt" + img_id).style.display = "block";
    document.getElementById("gallink"  + img_id).style.backgroundColor="red";
    showcat = img_id;
}

----------------------------------------

Som sagt, så hvis jeg klikkede på fx link 2, så skifter den fint baggrunds farve, men hvis jeg så klikker på link 3, så skal den gøre link2 baggrundsfarven hvid, og gøre 3'eren rød
Avatar billede majbom Novice
21. januar 2009 - 11:31 #1
hvorfor ikke lave det med css og active-pseudo-klassen:

a:active
{
  background-color: red;
}

?
Avatar billede nickyc Nybegynder
21. januar 2009 - 11:35 #2
Hehe, ja, den havde jeg ikke lige tænkt over :) - Men dog lige endnu et spørgsmål, når det er jeg kommer ind på siden, så er det første link ikke markeret med den røde baggrundsfarve idet man ikke har trykket på linket... Skal dette så laves med javascript, eller har jeg overset noget der osse? :)
Avatar billede nickyc Nybegynder
21. januar 2009 - 11:39 #3
Forresten, så virker det med pseudu klassen ikke i FF ?
Avatar billede nickyc Nybegynder
21. januar 2009 - 11:42 #4
brugte a:focus til FF i stedet... But still, kæmper med problemet med den skal være første link skal være markeret når jeg kommer ind på siden
Avatar billede majbom Novice
21. januar 2009 - 11:46 #5
hmm, der kunne du godt bruge noget javascript så:

<body onload="document.getElementById('gallink1').style.backgroundColor='red'">
Avatar billede nickyc Nybegynder
21. januar 2009 - 12:15 #6
Jaeh, fungerer dog ikke helt, for den er altid rød så, også selvom jeg klikker på et andet link
Avatar billede majbom Novice
21. januar 2009 - 12:47 #7
ja, det vil den selvfølgelig være...

så skal du sq nok tilbage til dit udgangspunkt med javascript til det hele.

du kan give alle dine links en attribut, f.eks. rel="gallink"

og så i toggleGallery løbe alle a-elementer igennem og dem der har rel="gallink" sætter du bgcolor til hvid og derefter sætter du den til rød på det pågældende a-tag
Avatar billede olebole Juniormester
21. januar 2009 - 18:32 #8
<ole>

Er det mon ikke bare noget à la:

var showcat = null;
function toggleGallery(img_id) {
    if (showcat) {
        document.getElementById("gal_img" + showcat).style.display = "none";
        document.getElementById("gallink"  + showcat).style.backgroundColor = "";
    }
    document.getElementById("gal_img" + img_id).style.display = "block";
    document.getElementById("imgtxt" + img_id).style.display = "block";
    document.getElementById("gallink"  + img_id).style.backgroundColor="red";
    showcat = img_id;
}

window.onload = function(){
    toggleGallery(1);
}

/mvh
</bole>
Avatar billede majbom Novice
04. november 2010 - 11:04 #9
kan vi lukke hér?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester