Søg
Avatar billede horizon Nybegynder
23. marts 2006 - 18:46 Der er 8 kommentarer og
1 løsning

vis 1 layer, skjul resten

jeg har 5 layers oveni hinanden som indeholder 5 forskellige sider til min side.

1 forside og så resten.

Hvordan får jeg min side til at reagere på når jeg trykker på f.eks. "side2" i min menu (som også ligger i et layer på samme side) så skjuler den den aktuelle side, f.eks. forsiden og viser "side2" layeret?

regner med at der skal lidt javascript til her ;)
Avatar billede mclemens Nybegynder
23. marts 2006 - 19:07 #1
Hvad med det her ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Ingen titel</title>

<script type="text/javascript">
<!--

function layhideandshow(hideid,showid){
document.getElementById("layer"+hideid).style.display="none";
document.getElementById("layer"+showid).style.display="block";
}

//-->
</script>

</head>


<body>
<div>
<div id="layer1"><layer>layer 1: <b onclick="layhideandshow('1','2');">vis 2</b><b

onclick="layhideandshow('1','3');">vis 3</b><b onclick="layhideandshow('1','4');">vis 4</b><b

onclick="layhideandshow('1','5');">vis 5</b></layer></div>

<div id="layer2" style="display:none;"><layer>layer 2: <b onclick="layhideandshow('2','1');">vis

1</b></layer></div>
<div id="layer3" style="display:none;"><layer>layer 3: <b onclick="layhideandshow('3','1');">vis

1</b></layer></div>
<div id="layer4" style="display:none;"><layer>layer 4: <b onclick="layhideandshow('4','1');">vis

1</b></layer></div>
<div id="layer5" style="display:none;"><layer>layer 5: <b onclick="layhideandshow('5','1');">vis

1</b></layer></div></div>
</body></html>
Avatar billede horizon Nybegynder
23. marts 2006 - 19:13 #2
Var ikke helt som jeg havde forestillet mig, her er hvad jeg har lavet indtil videre

        <div id="Menuboks">
            <ul>
                <li><a href="#" onclick="">Forside</a></li>
                <li><a href="#" onclick="">Side1</a></li>
                <li><a href="#" onclick="">Side2</a></li>
                <li><a href="#" onclick="">Side3</a></li>
                <li><a href="#" onclick="">Side4</a></li>
            </ul>
        </div>
<div id="Forside" class="Centerboks">
blah
</div>
<div id="Side1" class="Centerboks" style="display:none">
mææh
</div>
<div id="Side2" class="Centerboks" style="display:none">
muuh
</div>
<div id="Side3" class="Centerboks" style="display:none">
rap
</div>
<div id="Side4" class="Centerboks" style="display:none">
næ hov!
</div>
Avatar billede horizon Nybegynder
23. marts 2006 - 19:14 #3
hov. der var en send-knap.

Altså menuen skal være fuld tilgængelig ligemeget hvilket layer man har gang i.

men går man ind på Side3 fra et andet div layer, så skal det forrige skjules og det nye vises.
Avatar billede mclemens Nybegynder
23. marts 2006 - 19:42 #4
Sådan ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Ingen titel</title>

<script type="text/javascript">
<!--

function layhideandshow(showid){
laycheck=document.getElementById("divlayers");
laycheck2=laycheck.getElementsByTagName("div");
for(runit=0;runit<laycheck2.length;runit++){
  if(laycheck2.item(runit).id.match("layer")){
  laycheck2.item(runit).style.display="none";
  }
}

if(document.getElementById("layer"+showid)){
  document.getElementById("layer"+showid).style.display="block";
}
}

//-->
</script>

</head>


<body>

        <div id="Menuboks" style="float:left;width:150px;height:100%;>
            <ul>
                <li><a href="java script: layhideandshow(1);"

onclick="layhideandshow(1);">Forsiden</a></li>
                <li><a href="java script: layhideandshow(2);">Side1</a></li>
                <li><a href="java script: layhideandshow(3);">Side2</a></li>
                <li><a href="java script: layhideandshow(4);">Side3</a></li>
                <li><a href="java script: layhideandshow(5);">Side4</a></li>
            </ul>
        </div>


<div id="divlayers" style="float:right;width:600px;">

<div id="layer1" class="Centerboks">Forside</div>

<div id="layer2" class="Centerboks" style="display:none;">Dit layer nr 1</div>

<div id="layer3" class="Centerboks" style="display:none;">Dit layer nr 2</div>

<div id="layer4" class="Centerboks" style="display:none;">Dit layer nr 3</div>

<div id="layer5" class="Centerboks" style="display:none;">Dit layer nr 4</div>

</div>

</div>
</body></html>
Avatar billede horizon Nybegynder
23. marts 2006 - 19:47 #5
helt perfekt ;D smid et svar
Avatar billede mclemens Nybegynder
23. marts 2006 - 19:52 #6
svar ;)
Avatar billede roenving Novice
24. marts 2006 - 15:45 #7
-- og den simpleste udgave ser sådan ud:

<script type="text/javascript">
var oldEm = null;
function show(id){
  if(oldElm)
    oldElm.display = "none";
  var oldElm = document.getElementById(id).style;
  oldElm.display = "block";
}
</script>
Avatar billede roenving Novice
24. marts 2006 - 15:46 #8
Uff ...

<script type="text/javascript">
var oldEm = null;
function show(id){
  if(oldElm)
    oldElm.display = "none";
  oldElm = document.getElementById(id).style;
  oldElm.display = "block";
}
</script>
Avatar billede mclemens Nybegynder
24. marts 2006 - 17:54 #9
se det var SMART!
- skal du have nogle af pointene roenving...
det bør du jo næsten...

p.s. horizon: Brug roenving's det er meget mere smart 8)
brug sidste udgave og skift:
var oldEm = null;
ud med:
var oldElm = null;

og i html'en:
layhideandshow(1)
ud med show('layer1')
- hvor 1 henviser til nummeret der er angivet p.t.
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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 dag 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »