Søg
Avatar billede krogstrup Nybegynder
27. februar 2003 - 17:37 Der er 15 kommentarer og
2 løsninger

sætte class på link

Jeg har X antal links

når man klikker på et link, skal en javascript funktion nulstille alle mine links til en bestemt class, hvorefter det valgte link skal have en anden class. Jeg ønsker altså at det aktive link skal bruge en anden class end de andre link

Jeg forestiller mig noget lignende dette:

<a href="1" class="normal" id="link1">link 1</a>
<a href="2" class="normal" id="link2">link 2</a>
<a href="3" class="normal" id="link1">link 3</a>

javascriptet skal altså søge efter alle links hvori ordet "link" indgår i ID. disse links skal så sættes til class = normal. Herefter skal det valgte link have class = selected.

anyone ?
Avatar billede -master-d- Nybegynder
27. februar 2003 - 18:16 #1
sådan her ?

<a href="1" class="normal" id="link1"onclick="this.className='anden';document.link2.className='tredje';document.link3.className='tredje';">link 1</a>
<a href="2" class="normal" id="link2" onclick="this.className='anden';document.link1.className='tredje';document.link3.className='tredje';">link 2</a>
<a href="3" class="normal" id="link3" onclick="this.className='anden';document.link2.className='tredje';document.link1.className='tredje';">link 3</a>
Avatar billede krogstrup Nybegynder
27. februar 2003 - 18:43 #2
ja, men jeg har brug for en funktion - som kan bruges på et vilkårligt antal links. men det er vigtigt at den ikke ændrer ALLE links i dokumenetet. Kun dem der indeholder f.eks. ordet "link" i deres ID. så jeg kan styre hvilke links der skal manipuleres !
Avatar billede pelkjaer Nybegynder
27. februar 2003 - 19:07 #3
//onclick="skiftKlasse('ID','class1','ID2','class2');return false;"
function skiftKlasse() {
  var a = arguments;
  for (i=0; i<a.length; i+=2) {
    if (document.getElementById) {
      if(a[i] != "none") {
        bla = document.getElementById(a[i]);
        bla.className = a[i+1];
      }
    }
  }
}

Når det er sagt så er det så langsomt at skifte klasser på den måde er det ikke kan anbefales. Selv MS fraråder det :)
Avatar billede krogstrup Nybegynder
27. februar 2003 - 20:00 #4
hvad er så den tilrådede måde at gøre det på ?
Avatar billede krogstrup Nybegynder
27. februar 2003 - 20:02 #5
pelkjaer >>>

kan du give en lynhurtig gennemgang af ID,class1,ID2 og class2 ?
Avatar billede pelkjaer Nybegynder
27. februar 2003 - 22:52 #6
Du har fx.
<a href="1" class="normal" id="link1">link 1</a>

her er ID "link1" og class er "normal"

Dvs at du med funktionen "skiftKlasse" kan skifte styles på en masse ID's på en gang.
Fx.
onclick="skiftKlasse('link1',normal,'link1','ikkenormal','link3','ikkenormal');return false;"

osv..

-----

Den tilrådene måde er istedet at skifte stylen direkte på elementet, da hele css strukturen så ikke skal genindlæses.

fx. med document.getElementById('elementID').style.color = "red";
Avatar billede krogstrup Nybegynder
28. februar 2003 - 00:13 #7
hmm - det kan godt være jeg spørger dumt, men hvordan ser koden til følgende ud:

loop gennem alle LINKS i dokumentet
if ID/NAME i link indeholder dette ord "link" gør følgende

bla bla bla

slut på if sætning
slut loop


???
Avatar billede =maddog= Nybegynder
28. februar 2003 - 01:02 #8
function loopLinks() {
    for (i=0; i!=document.links.length; i++) {
        if (document.links[i].id.indexOf("link")!=-1)
            document.links[i].style.color = "red";
    }
}
Avatar billede krogstrup Nybegynder
28. februar 2003 - 08:26 #9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>

<style>
A.mitLink, A.mitLink:ACTIVE, A.mitLink:VISITED {font-family:verdana; font-size:11px; color:#000000; text-decoration:none;}
A.mitLink:HOVER {text-decoration:underline; background:silver;}
A.selectedLink {font-family:verdana; font-size:11px; color:#000000; text-decoration:none; background:silver;}
</style>   

<script>
function chooseLink(linkID) {
for (i=0; i!=document.links.length; i++) {
    if (document.links[i].id.indexOf("link")!=-1)
        document.links[i].className = "mitLink";
}

document.getElementById(linkID).className = "selectedLink";
}
</script>
   
</head>

<body>

<a href="#" class="mitLink" ID="link1" onClick="chooseLink('link1');">Link 1</a><br>
<a href="#" class="mitLink" ID="link2" onClick="chooseLink('link2');">Link 2</a><br>
<a href="#" class="mitLink" ID="link3" onClick="chooseLink('link3');">Link 3</a><br>
<a href="#" class="mitLink" ID="link4" onClick="chooseLink('link4');">Link 4</a><br>
<a href="#" class="mitLink" ID="link5" onClick="chooseLink('link5');">Link 5</a><br>

</body>
</html>
Avatar billede krogstrup Nybegynder
28. februar 2003 - 08:28 #10
hej pelkjaer og maddog

Nu har jeg fået ovenstående skruet sammen. Koden virker på min IE6. Vil den virke fra IE4+ ? Hvis ikke, hvad skal der så ændres for at den vil virke fra IE4.

Hvordan ser ovenstående script ud rent hastighedsmæssigt - er det en dum/forkert måde at gribe det an på ???

:-)
Avatar billede =maddog= Nybegynder
28. februar 2003 - 08:39 #11
rent hastighedsmæssigt er det en anelse ødselt. det ville være hurtigere ret regnemæssigt at sætte hver style separat.
function chooseLink(linkID) {
for (i=0; i!=document.links.length; i++) {
    if (document.links[i].id.indexOf("link")!=-1) {
        styleRoot = document.links[i].style;
        styleRoot.textDecoration = underline;
        // osv
    }
}

skulle virke fint på IE4, men den har du jo hørt før.
Avatar billede krogstrup Nybegynder
28. februar 2003 - 10:07 #12
virker denne også i IE4:

document.getElementById(linkID).className = "selectedLink";

???
Avatar billede pelkjaer Nybegynder
28. februar 2003 - 10:15 #13
Nej. IE4 bruger document.all
Avatar billede krogstrup Nybegynder
28. februar 2003 - 10:26 #14
tusind tak for jeres svar :-)

smider I begge et svar ?
Avatar billede pelkjaer Nybegynder
28. februar 2003 - 10:32 #15
jep :)
Avatar billede =maddog= Nybegynder
28. februar 2003 - 12:31 #16
jep goes for me too :)
Avatar billede krogstrup Nybegynder
28. februar 2003 - 12:34 #17
takker endnu en gang...

:-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 18:50 Slet lokal konto Af ErikHg i Windows
I går 16:05 Ændre tal i en celle Af xvid i Excel
I går 13:47 Dette er ikke en kommerciel session i Windows 11 Af eksmojo i Windows
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
White papers
Flere white papers »