Avatar billede coolcom Nybegynder
19. november 2007 - 12:56 Der er 9 kommentarer og
1 løsning

Faneblads menu boks

Hey..

Jeg søger en forklaring på hvordan sådan en menu laves:

http://www.fbi.dk/index.php?option=com_content&task=view&id=135&Itemid=1

Her tænker jeg på menuen midt på siden.
Avatar billede jokkejensen Novice
19. november 2007 - 13:06 #1
Avatar billede coolcom Nybegynder
19. november 2007 - 13:23 #2
Ikke helt..

Det jeg tænker på er den kasse der er nedenunder med forskelligt indhold alt efter hvilken knap man trykker på.

Der skal skiftes indhold UDEN sideskift, dvs. noget kombineret CSS og javascript
Avatar billede coolcom Nybegynder
19. november 2007 - 16:03 #4
Nej.. De skifter side hver gang man klikker på et link.
Avatar billede w13 Novice
19. november 2007 - 17:59 #5
Altså javascript-delen er bare at vise/skjule et div-layer:
------------------------------------------
<script type="text/javascript">'
var objTab;
function Tab(id){
  if(objTab)objTab.style.display="none"
  objTab=document.getElementById(id);
  objTab.style.display="block"
}
</script>

<span onclick="Tab('first')">Første</span>
<span onclick="Tab('second')">Anden</span>
<span onclick="Tab('third')">Tredje</span>

<div id="first" style="display:block">Indhold 1 her!</div>
<div id="second" style="display:none">Indhold 2 her!</div>
<div id="third" style="display:none">Indhold 3 her!</div>
------------------------------------------
Så er det bare at style span-elementerne med CSS. Du kan bruge følgende kode, hvis du har CSS-klasserne closedTab og openTab:
------------------------------------------
<script type="text/javascript">'
var objTab,objTabContent;
function Tab(elm,id){
  if(objTabContent)objTabContent.style.display="none"
  objTabContent=document.getElementById(id);
  objTabContent.style.display="block";
  elm.className="openTab";
  if(objTab)objTab.className="closedTab";
  objTab=elm;
}
</script>

<span class="openTab" onclick="Tab(this,'first')">Første</span>
<span class="closedTab" onclick="Tab(this,'second')">Anden</span>
<span class="closedTab" onclick="Tab(this,'third')">Tredje</span>

<div id="first" style="display:block">Indhold 1 her!</div>
<div id="second" style="display:none">Indhold 2 her!</div>
<div id="third" style="display:none">Indhold 3 her!</div>
Avatar billede roenving Novice
20. november 2007 - 22:16 #6
-- bortset fra, at det aldrig kan blive anbefalelsesværdigt at skifte class on-the-fly, da browseren for ikke at risikere at blive forvirret er nødt til at genberegne hele sidens rendering ,-(
Avatar billede w13 Novice
20. november 2007 - 22:29 #7
Schh. :P
Avatar billede coolcom Nybegynder
26. november 2007 - 14:41 #8
w13:

Tak, det hjalp mig på vej til at finde ud af det.
Smid et svar for point:D
Avatar billede w13 Novice
26. november 2007 - 15:00 #9
Ok! :)
Avatar billede w13 Novice
27. november 2007 - 00:51 #10
Takker for point!
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