CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede ptrlsn Nybegynder
18. marts 2006 - 19:55 Der er 18 kommentarer og
1 løsning

Gemme og vise alle <div> med samme id

Hej,

Er det muligt, at få gemt/vist alle div-tags med samme ID ved tryk på et link? Jeg er efterhånden løbet tør for ideer, og de metoder jeg har fundet på nettet, kan jeg ikke få til at virke.

På forhånd tak
Peter
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:07 #1
Sådan her?

... skift: <body>
til: <body onload="vl();">
- hvis alle menuer skal være skjulte fra start af.


<html><head>
<script language="javascript">
function vl(){

if(document.getElementById("menuopen")){
  while(document.getElementById("menuopen")){
  document.getElementById("menuopen").style.display="none";
  document.getElementById("menuopen").id="menuclosed";
  }
}else if(document.getElementById("menuclosed")){
  while(document.getElementById("menuclosed")){
  document.getElementById("menuclosed").style.display="block";
  document.getElementById("menuclosed").id="menuopen";
  }
}
}
</script>
</head>

<body>

<a href="#" onclick="vl()"><b>Vis/skjul menuer</b></a>

<div id="menuopen"><b>Menu1</b></div>
<div id="menuopen"><b>Menu2</b></div>
<div id="menuopen"><b>Menu3</b></div>

</body></html>
Avatar billede ptrlsn Nybegynder
18. marts 2006 - 20:13 #2
Det virker. Mange tak :-) Nu skal jeg så lige prøve at forstå koden
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:17 #3
Her er et udvidet...
hvis der bliver behov for det...

<html><head>
<script language="javascript">
function vl(menu){

if(document.getElementById(menu+"open")){
  while(document.getElementById(menu+"open")){
  document.getElementById(menu+"open").style.display="none";
  document.getElementById(menu+"open").id=menu+"closed";
  }
}else if(document.getElementById(menu+"closed")){
  while(document.getElementById(menu+"closed")){
  document.getElementById(menu+"closed").style.display="block";
  document.getElementById(menu+"closed").id=menu+"open";
  }
}
}

function vls(){
vl('toj');
}

</script>
</head>

<body onload="vls();">

<div><a href="#" onclick="vl('toj')"><b>Vis/skjul menuer med tøj</b></a></div>

<div id="tojopen"><b>tøj1</b></div>
<div id="tojopen"><b>tøj2</b></div>
<div id="tojopen"><b>tøj3</b></div>


<div><a href="#" onclick="vl('sko')"><b>Vis/skjul menuer med sko</b></a></div>

<div id="skoopen"><b>sko1</b></div>
<div id="skoopen"><b>sko2</b></div>
<div id="skoopen"><b>sko3</b></div>


</body></html>
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:19 #4
Svar ;)


Når vl() funktionen i første udgave kaldes løber den alle id's med enten menuopen eller menuclosed igennem og skifter dem rundt (skifter id og display).

nr. 2 gør det samme med gør det muligt at have flere menuer til forskellige dele...
Avatar billede ptrlsn Nybegynder
18. marts 2006 - 20:24 #5
Jeg forstå ikke helt det pointsystem der er her på eksperten. Jeg er usiker på om jeg fik givet dig de 100 point, eller om jeg kom til, at give mig selv dem :-) Under mit svar på din kommentar står der mit brugernavn i venstre side, og i højre side er der to knapper. Den ene hedder Accepter den anden Afvis. Jeg trykkede på Accepter, men eftersom der kun står mit brugernavn til venstre for, ved jeg ikke om du fik pointene. Kan du undersøge det?

Hvad gør i øvrigt "style.display="none";"

/Peter
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:24 #6
Lidt mere hvis du skal bruge en "menu" med submenues http://www.eksperten.dk/spm/692510
(gik nok lidt amok i den nævnte tråd ... men det var god træning)
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:25 #7
Tryk på dit navn ud for dit svar herefter afvis
tryk på mit navn ud for mit svar og herefter godkend ;)
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:28 #8
style="display:none;" er css og kan sættes via. stylesheet, <style></style> i head samt i javascript ligesom med baggrundsfarver, borders m.v.

display:none; gør at indholdet ikke vises og ikke optager plads
display:block; ja, det modsatte :)

Her er lidt om .css og javascript inde
http://www.w3schools.com
Avatar billede mclemens Nybegynder
18. marts 2006 - 20:37 #9
Lidt bedre body til det første eksempel
- onClick kan jo også sættes på div'en
(kan selvfølgelig også ændres i nr.2 eksempel)

...indholdet fra første eksempel...

<body>

<div onclick="vl()"><b>Vis/skjul menuer</b></div>

<div id="menuopen"><b>Menu1</b></div>
<div id="menuopen"><b>Menu2</b></div>
<div id="menuopen"><b>Menu3</b></div>

</body></html>
Avatar billede psykochicken Nybegynder
19. marts 2006 - 02:42 #10
mclemens >> Det er nok ikke en god ide at lære andre at give flere elementer samme id. Det lykkes kun for dig, fordi du skifter id og løkken derpå fanger næste element med rette id. Det er imod w3c´s anbefalinger: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 - og siden kan ikke valideres...

/psc
Avatar billede roenving Novice
19. marts 2006 - 11:38 #11
-- og det er simpelthen ikke tilladt efter standarden at bruge samme id til flere elementer ...

-- som f.eks. også gælder for CPR-numre !-)
Avatar billede mclemens Nybegynder
19. marts 2006 - 12:23 #12
sorry jeg er ny i js - og ved godt det med id's men troede at det kunne virke ...
ved godt det ikke validerer (men, nåh ok) - kommer med bedre løsning senere (idag forhåbentlig) :/


roenving> Det er helt ok ;)

og det er simpelthen ikke tilladt efter standarden at bruge samme id til flere elementer ...>
- Nej og iflg. w3c's anbefalinger bør man undlade brug af frames men det gør du vel heller ikke :/
Avatar billede roenving Novice
19. marts 2006 - 12:34 #13
W3C anbefaler ikke at man undlader at bruge (i)frames, men gør i et af deres arbejdspapirer opmærksom på, at det at benytte (i)frames kan give en række uhensigtsmæssigheder ...

-- hvilket de i øvrigt også gør i et andet af deres arbejdspapirer omkring det at bruge billeder i et html-dokument ...
Avatar billede mclemens Nybegynder
19. marts 2006 - 12:46 #14
at det at benytte (i)frames kan give en række uhensigtsmæssigheder ...>
- nåh, ok så har jeg misforstået det...
Avatar billede mclemens Nybegynder
19. marts 2006 - 15:11 #15
Sådan her?

<html><head>
<script language="javascript">
function vls(){
vl('toj');
vl('sko');
}

function vl(menu){runit=1;

if(document.getElementById(menu+"1open")){
  while(document.getElementById(menu+runit+"open")){
  document.getElementById(menu+runit+"open").style.display="none";
  document.getElementById(menu+runit+"open").id=menu+runit+"closed";
  runit++;}
}else if(document.getElementById(menu+"1closed")){
  while(document.getElementById(menu+runit+"closed")){
  document.getElementById(menu+runit+"closed").style.display="block";
  document.getElementById(menu+runit+"closed").id=menu+runit+"open";
  runit++;}
}
}

</script>
</head>

<body onload="vls();">

<div><a href="#" onclick="vl('toj')"><b>Vis/skjul menuer med tøj</b></a></div>

<div id="toj1open"><b>tøj1</b></div>
<div id="toj2open"><b>tøj2</b></div>
<div id="toj3open"><b>tøj3</b></div>


<div><a href="#" onclick="vl('sko')"><b>Vis/skjul menuer med sko</b></a></div>

<div id="sko1open"><b>sko1</b></div>
<div id="sko2open"><b>sko2</b></div>
<div id="sko3open"><b>sko3</b></div>


</body></html>
Avatar billede mclemens Nybegynder
19. marts 2006 - 15:54 #16
... en undskyldning for at bruge samme id på det som jeg gjorde før var at ? lød på hvordan man kunne gøre det hvis det var samme id ;)
Avatar billede mclemens Nybegynder
20. marts 2006 - 08:22 #17
Med class istedet for id og med getElementsByTagName
istedet for alt det andet :) ... ændrer min kodning
så godt jeg kan væk fra det innerHTML :P

( http://www.eksperten.dk/spm/696426 , 20/03-2006 00:16:43 )
Grundet forslag om skift af teknik i ovennævnte tråd
- roenving ved hvad han taler om :)


<html><head>
<script language="javascript">
function vls(){
vl('toj');
vl('sko');
}

function vl(menu){
divs=document.getElementsByTagName("div");
for(run=0;run<divs.length;run++){
  if(divs[run].className==menu){
  if(divs[run].style.display=="none"){
    divs[run].style.display="block";}else{
    divs[run].style.display="none";
  }
  }
}
}

</script>
</head>

<body onload="vls();">

<div><a href="#" onclick="vl('toj')"><b>Vis/skjul menuer med tøj</b></a></div>

<div class="toj"><b>tøj1</b></div>
<div class="toj"><b>tøj2</b></div>
<div class="toj"><b>tøj3</b></div>


<div><a href="#" onclick="vl('sko')"><b>Vis/skjul menuer med sko</b></a></div>

<div class="sko"><b>sko1</b></div>
<div class="sko"><b>sko2</b></div>
<div class="sko"><b>sko3</b></div>


</body></html>
Avatar billede mclemens Nybegynder
20. marts 2006 - 09:05 #18
og en mere med autolukning af andre åbne menuer ved klik på anden menu :)

<html><head>
<script language="javascript">
function vls(menu){
vl('toj',menu);
vl('sko',menu);
}

function vl(clmenu,menu){
divs=document.getElementsByTagName("div");
for(run=0;run<divs.length;run++){
  if(divs[run].className==menu && divs[run].className==clmenu){
  if(divs[run].style.display=="none"){
    divs[run].style.display="block";}else{
    divs[run].style.display="none";
  }
  }else if(divs[run].className==clmenu){
  divs[run].style.display="none";
  }
}
}

</script>
</head><body onload="vls('0');">

<div onclick="vls('toj')"><b>Vis/skjul menuer med tøj</b></div>
<div class="toj"><b>tøj1</b></div>
<div class="toj"><b>tøj2</b></div>
<div class="toj"><b>tøj3</b></div>

<div onclick="vls('sko')"><b>Vis/skjul menuer med sko</b></div>
<div class="sko"><b>sko1</b></div>
<div class="sko"><b>sko2</b></div>
<div class="sko"><b>sko3</b></div>
</body></html>
Avatar billede mclemens Nybegynder
20. marts 2006 - 09:09 #19
hvis man i det sidste tilfælde ved klik på en speciel menu ikke ønsker at lukke alle de andre kaldes funtionen vl istedet for vls f.eks.:
<div onclick="vl('toj','toj')"><b>Vis/skjul menuer med tøj</b></div>
... vil ikke lukke menuen sko ved klik på div'en selvom sko menuen er åben :)
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
Opgavestyring Af ingeman i JavaScript 1 I går 16:06 I går 20:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript 4 21/05/202417:19 22/06/202422:07
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 21:29 Tastatur stopper med at virke et par sekunder, for så at virke igen Af Thor i PC
I går 18:24 Xopslag der retunerer mindste værdi, dog ikke "nul" Af Tom K. i Excel
I går 16:06 Opgavestyring Af ingeman i JavaScript
14/0913:35 NVIDIA Sheild Pro Af FCK i Musik & videoafspillere
14/0913:01 Undgå matriksformel? Af Dan Elgaard i Excel
White papers
Flere white papers »


Premium
Teaser billede
Sådan får hackerne med ny fidus adgang til dit system for kun 10 dollar: Næsten umuligt at beskytte sig
Læs mere »
Kommunernes it-forbrug stiger: Sådan har Odense Kommune holdt sine udgifter til it-licenser og it-konsulenter nede
Tidligere Cibicom-topchef Michael Meister har landet nyt job: Skal være administrerende direktør
Styrelse kom med tastefejl til at lægge tre år for meget på it-kontrakt til 350 millioner kroner
Se alle »
Computerworld
Teaser billede
iPhone 16 og 16 Pro slippes løs: Her er de to afgørende nyheder
Læs mere »
Apple ændrer grundlæggende på den måde, som din iPhone skal opdateres på
Om lidt går det løs: Så banebrydende bliver iPhone 16
Guide: Sådan wiper du dine harddrev og andre medier, så ingen kan læse dem – nogensinde
Se alle »
CIO
Teaser billede
Nu kommer næste store version af Copilot
Læs mere »
Syv vigtige teknologier, som alle CIO'er bør forholde sig til - kommer til at sætte dagsordenen
Søstrene Grene skifter Microsoft ud med SAP og rykker for første gang i clouden i stor ERP-transformation
Microsoft har fundet 79 sårbarheder i Windows – du bør opdatere straks
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Professor: "Det er på høje tid at opløse virksomhedernes it-afdelinger"
Kom tæt på Danmarks nye digitaliserings-minister: 33-årige Caroline Stage Olsen er tidligere tobaks-lobbyist - har været aktiv i politik siden hun var helt ung
Se alle »
White paper
Teaser billede
Sådan får du overblik og beskytter dine cloudapplikationer
Læs mere »
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
Guide: Sådan udvikler du en moderne netværksstrategi
Opdag fordelene ved cloud-baseret backup og recovery
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »