Avatar billede Dazzle Novice
15. maj 2006 - 12:44 Der er 6 kommentarer og
1 løsning

Ændre klassenavn på link når der bliver trykket på det

Hej eksperter!

Jeg har nogle links som ikke er tildelt en klasse. Jeg skal bruge en java funktion som tildeler linket en klasse i det øjeblik man trykker på det...

Jeg har prøvet det her (som ikke virker), og forestiller mig noget i den stil:

<script language="Javascipt">
function changeClassName() {
    if(document.getElementById('link')) {
        document.getElementById('link').className='active';
    } else {
        document.getElementById('link').className='';
    }
}
</script>

<a class="" href="side.html" id="link" onclick=changeClassName();>MitLink</a>

Kan nogen måske hjælpe mig??
Avatar billede softspot Forsker
15. maj 2006 - 12:56 #1
Det burde fungere. Prøv at omslutte changeClassName(); med anførselstegn, altså:

<a class="" href="side.html" id="link" onclick="changeClassName();">MitLink</a>

Hvis du vil have en klikeffekt (hvor knappen skifter style idet du klikker venstre museknap ned og tilbage til den gamle når du slipper), så ville jeg forsøge med denne version:

<a class="" href="side.html" onmousedown="setClickStyle(this,true);" onmouseup="setClickStyle(this,false);">MitLink</a>

<script type="text/javascipt">
function setClickStyle(obj,state) {
  if(obj) {
    if(state) {
      obj.className='active';
    } else {
      obj.className='';
    }
  }
}
</script>

Bort set fra det, så er det ikke tilrådeligt at ændre class på et element, da det foranlediger en ny rendering. Du bør i stedet ændre de enkelte styles i stedet, det er væsentlig hurtigere.
Avatar billede softspot Forsker
15. maj 2006 - 13:05 #2
...og her kommer så lige en testet version der benytter sig af ændring i style i stedet for className:

<html>
<head>
  <script type="text/javascript">
  function setClickStyle(obj,state) {
    if(obj) {
      if(state) {
        obj.style.backgroundColor='blue';
      } else {
        obj.style.backgroundColor='';
      }
    }
  }
  </script>
</head>
<body>
  <a href="?" onmousedown="setClickStyle(this,true);" onmouseup="setClickStyle(this,false);">MitLink</a>
</body>
</html>
Avatar billede Dazzle Novice
15. maj 2006 - 13:12 #3
Jeg har afprøvet dit forslag, men det virker stadig ikke....

Problemet er at mit link er pakket ind i en funktion, som udskriver menuen når man kalder den..

Den fulde kode ser sådan ud (ved ikke om du er php-kender):

<script language="Javascipt">
function changeClassName() {
    if(document.getElementById('link')) {
        document.getElementById('link').className='active';
    } else {
        document.getElementById('link').className='';
    }
}
</script>

<?
function initMenu() {
    echo "<ul id='tabmenu'>";
    echo "<li><a class='active' href='index.php' id='link' onclick='changeClassName();'>Link 1</a></li>";
    echo "<li><a class='' href='page1.php' id='link' onclick='changeClassName();'>Link 2</a></li>";
    echo "<li><a class='' href='page2.php' id='link' onclick='changeClassName();'>Link 3</a></li>";
    echo "</ul>";
}
?>

Dvs. det første link er aktivt når menuen bliver loadet, og javascriptet skulle så gerne slå klasses fra og til når der klikkes på de forskellige links...
Avatar billede softspot Forsker
15. maj 2006 - 13:23 #4
Problemet er nok at du genindlæser siden (og dermed genererer menuen på serveren) hver gang du klikker på et link, så det er ikke javascript du skal bruge til at sætte klassen, men PHP (det skal med andre ord ske på serveren og ikke på klienten). Så det er i realiteten i din PHP-funktion "initMenu" du skal løse opgaven.

Jeg er ikke PHP-programmør, men kan dog alligevel godt gennemskue at du har behov for at lave en betingelse omkring værdien i class-attributten. Det betyder også at du kan slippe for at have client-scriptet liggende (du skal selv lige lave betingelsen på PHP'sk):

<?
function initMenu() {
  echo "<ul id='tabmenu'>";
  echo "<li><a ";
/* TODO: UNDERSØG OM DEN AKTUELLE SIDE ER AKTIV OG HVIS DEN ER
  SÅ INDSÆT STRENGEN MED class-ATRIBUTTEN...
  echo "class='active' ";
*/
  echo "href='index.php'>Link 1</a></li>";
  echo "<li><a  ";
/* TODO: UNDERSØG OM DEN AKTUELLE SIDE ER AKTIV OG HVIS DEN ER
  SÅ INDSÆT STRENGEN MED class-ATRIBUTTEN...
  echo "class='active' ";
*/
  echo "href='page1.php'>Link 2</a></li>";
  echo "<li><a  ";
/* TODO: UNDERSØG OM DEN AKTUELLE SIDE ER AKTIV OG HVIS DEN ER
  SÅ INDSÆT STRENGEN MED class-ATRIBUTTEN...
  echo "class='active' ";
*/
  echo "href='page2.php'>Link 3</a></li>";
  echo "</ul>";
}
?>

Desuden må du heller ikke have flere elementer i en side med samme id, og id'et er i øvrigt heller ikke nødvendigt længere (ligesom onclick-eventet heller ikke er det), så det har jeg tilladt mig at fjerne :)
Avatar billede Dazzle Novice
15. maj 2006 - 13:30 #5
Hmm, det kan jeg da egentlig godt se, nu du siger det :D En mine php-venner har lige sagt det samme :P Tror jeg har en idé om hvordan det skal se ud nu...

Tak for tippet mht at udelukke id'et og onclick-eventet, jeg er noob i java-scrip så det anede jeg ikke :P
Avatar billede softspot Forsker
15. maj 2006 - 13:55 #6
Velbekomme - behold bare point selv... NÅÅH! Det har du allerede gjort ;o)
Avatar billede olebole Juniormester
15. maj 2006 - 17:12 #7
<ole>

Læg mærke til, hvad softspot prøvede at forklare dig i (15/05-2006 12:56:05):
Det er en dårligt performende løsning at skifte CSS-klasser på HTML-elementer ... det gør man så at sige aldrig ... og af gode grunde  ;o)

/mvh
</bole>
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

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