Visa och dölja divar.

Tjo.

Jag har en sida där jag ska ha 3 stycken divar, alla lika höga och lika breda. Under ska det vara tre länkar. Klickar man på länk ett visas den ena diven, klickar man på länk två så visas den andra diven (och den första diven stängs) och likadant med div tre. från början ska div ett visas.

Hur tricksar man egentligen till något sådant här?

Jag har sökt runt lite på nätet men kommer inte på några bra sökord och får bara några fula lösningar med tokmycket javascript eller dhtml. There's gotta be a better way.

Så om ni har en lösning hosta upp den, eller berätta vad man kan söka efter så att jag kan hitta själv.

Puss och respekt till er!

Du kan åstadkomma det du vill med exempelvis ett javascript som körs på onclick.

<div id="test1">
Hej och hå
</div>
<div id="test2">
Hej och hå
</div>
<div id="test3">
Hej och hå
</div>

<style type="text/javascript">
function test1(){
   document.getElementById('test1').style.visibility = 'visible';
   document.getElementById('test2').style.visibility = 'hidden';
   document.getElementById('test3').style.visibility = 'hidden';
}
</style>

<a href="javascript:test1();">Klicka</a>

Det här är helt otestat, men kanske hjälper dig en bit på vägen?

<div id="test0">
Hej och hå 0
</div>
<div id="test1">
Hej och hå 1
</div>
<div id="test2">
Hej och hå 2
</div>

<style type="text/javascript">
function visa(visanummer){
   num = 3;

   for (i=0; i<num; i++){
      document.getElementById("test" + i).style.visibility = (visanummer == i)?"visible":"hidden";
   }
}
</style>

<a href="java script:visa(0);">Klicka</a> 
<a href="java script:visa(1);">Klicka</a> 
<a href="java script:visa(2);">Klicka</a>

1. Saker blir dock enklare om du numrerar från 0 och inte 1 (Im du nu inte gör så redan)
2. Ta bort mellanrummet mellan java och script, det är forumet som lägger till det (Men det visste du nog)
3. Ändra num=3 till det rätta antalet. Det finns smidigare sätt att lösa detta på, men det här är ett sätt.

Testade lite snabbt nu och jag får ingen att fungera alls, vad missar jag att göra?

I båda fallen så visas alla divarna fårn början och ingen visas eller döljs när jag testar klicka runt.

Tråden flyttad från HTML, XHTML & CSS.

mvh Palle
Moderator webForum

Är det nått sånt här du menar?
http://member.webforum.nu/366/okkido_hide.htm

 

Perfekt, tackar!