WN - Vad skriva i href om ingenting skall hända

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Vad skriva i href om ingenting skall hända (https://www.wn.se/forum/showthread.php?t=18910)

Jag har en länk som jag endast använder för att trigga en javascriptfunktion vid onmouseover. Ingenting skall hända när man klickar på länken.

Vad skall jag sätta href till att vara?

Sätter jag den till href="#" så hamnar jag alltid överst på sidan. Sätter jag den till href="javascript:void(0)" så händer det absolut ingenting.

Är void(0) det bästa sättet att göra "ingenting", och vad innebär egentligen void(0)?

Det bästa är väl att inte använda en anchor-tag, utan använda div/span och lägga onclick-event på den. Med CSS kan du göra så att man får en pekar-hand när man hovrar elementet. Tänk på att det är snyggast att tilldela eventet med javascript, och inte <div onclick="">. Dvs, sätt id på elementet, hämta det med getElementById() och tilldela onclick-event-handlern.

viod(0) betyder i stort sett bara att "inget ska hända". Läs mer här annars: http://www.tizag.com/javascriptT/javascriptvoid.php

Tack för tipset!

Jag skulle gärna vilja tilldela eventet med javascript, som du föreslår - men har problem att göra det då jag inte vill ge varje "länk" ett eget id utan endast en klass. Men det kanske går att lösa på något annat sätt?

Kolla på den här koden så förstår du vad jag menar. Jag vill kunna klicka på valfri rubrik (class="rubrik") och dölja underliggande lista.

<ul>
<li class="rubrik">rubrik 1
<ul>
[*]Inställningar
[*]Hjälp
[/list]<li class="rubrik">rubrik 2
<ul>
[*]Logga in
[*]Kontoinformation
[*]Diverse[/list][/list]
Har du något tips på hur jag kan göra detta?

Du menar att ifall man klickar på t.ex. "Hjälp", så ska rubrik 1, Inställningar och Hjälp döljas? Eller menar du att man ska trycka på "rubrik 1" för att bara dölja listan under?

Klickar man på "rubrik 1" så skall listan under (inställningar, hjälp) döljas.

Jag skulle kunna ge id till både rubrik 1 och den underlinggande <ul>, men då skulle jag behöva en särskild funktion till respektive rubrik. Det måste finnas något enklare sätt där man kan generellt kan koda

om klick på class="rubrik" så skall den underliggande <ul> döljas

Ps. Jag lyckades få rubriken att likna en länk så här
.rubrik {
color: #36c;
text-decoration: underline;
cursor: pointer;
}

Något i den här stilen? :)

Kod:

<html>

<head>

<script type="text/javascript">

<!--

window.onload = function()

{

   var li = document.getElementById( 'clicker' ).getElementsByTagName( 'li' );



   for( var i = 0, l = li.length; i < l; i++ )

   {

     if( li[i].className == 'rubrik' )

     {

        var span = li[i].getElementsByTagName( 'span' );

        span[0].onclick = showOrHideList;

     }

   }

}



function showOrHideList( e )

{

   if( !e ) { e = window.event }

   var target = e.target || e.srcElement;



   var list = target.parentNode.getElementsByTagName( 'ul' );



   if( list[0].style.display == 'none' )

   {

     list[0].style.display = 'block';

   }

   else

   {

     list[0].style.display = 'none';

   }

}

-->

</script>

<style type="text/css">

<!--

.rubrik span

{

   cursor: pointer;

}

-->

</style>

</head>

<body>



<ul id="clicker">



   <li class="rubrik"><span>rubrik 1</span>

     <ul>

        <li><a href="#">Inställningar</a></li>

        <li><a href="#">Hjälp</a></li>

     </ul>

   </li>



   <li class="rubrik"><span>rubrik 2</span>

     <ul>

        <li><a href="#">Logga in</a></li>

        <li><a href="#">Kontoinformation</a></li>

        <li><a href="#">Diverse</a></li>

     </ul>

   </li>

</ul>



</body>

</html>

Glöm sen inte att lägga JS:en i en egen fil, ser mycket trevligare ut!

Stort tack!!! Elegant!

Vill man slippa rubrikclassen kan man i stället söka efter LI:s som har en UL som firstChild.

Mjo, men Firefox (och andra webbläsare) har ju en tendens att även göra whitespace till children i DOM-trädet, så isåfall måste man vara säker att det inte finns någon mellanrum mellan li:n och ul:n, vilket inte är en helt bra lösning.

Citat:

Originally posted by DeSoto@Jan 26 2007, 12:29
Mjo, men Firefox (och andra webbläsare) har ju en tendens att även göra whitespace till children i DOM-trädet, så isåfall måste man vara säker att det inte finns någon mellanrum mellan li:n och ul:n, vilket inte är en helt bra lösning.

Brukar köra följande funktion när jag behöver navigera i DOM-trädet och vill ta bort whitespaces (John Resigs kod om jag inte minns fel). Kan förstås bli lite tungt om det är stora dokument. Men man behöver ju inte köra den i hela dokumentet utan bara där man ska navigera.

Kod:

function cleanWhitespace( element ) {

 element = element || document;

 while ( cur != null ) {

  if ( cur.nodeType == 3 && ! /\S/.test(cur.nodeValue) ) {

   element.removeChild( cur );

  } else if ( cur.nodeType == 1 ) {

   cleanWhitespace( cur );

  }

  cur = cur.nextSibling;

 }

}