Avatar billede Slettet bruger
18. oktober 2006 - 10:10 Der er 5 kommentarer og
1 løsning

vise et element og skjule de andre

Hej

Jeg har en række lag (<div>) som skal skjules/vises ved valg i en selectbox.

De er navngivet med nogle tilfældige tal (dog i stigende order) sådan her:

<div id="mydiv1"></div>
<div id="mydiv2"></div>
<div id="mydiv5"></div>
<div id="mydiv11"></div>
<div id="mydiv13"></div>

Dernæst har jeg en select-box

<select name="version" id="version" onchange="skift(this.value)">
<option value="1">
<option value="2">
<option value="5">
<option value="11">
<option value="13">
</select>

Denne aktiverer noget JS der skal skjule alle div's, undtagen den som man vælger. Der skal med andre ord kun være en div synlig ad gangen.

function skift(where) {
if(where > 0) {
what = 'div' + where;
document.getElementById(what).style.display='block';
}
}

Men hvordan får jeg de "ukendte" divs løbet igennem så de skjules, inden den aktuelle vises?

På forhånd tak
Avatar billede olebole Juniormester
18. oktober 2006 - 10:41 #1
<ole>

Du kan gemme en reference til den, du viser - og så gemme den næste gang:

var oActive = null;
function skift(where) {
    if(where > 0) {
        if (oActive) oActive.style.display = "none";
        oActive = document.getElementById('div' + where);
        oActive.style.display = 'block';
    }
}


/mvh
</bole>
Avatar billede Slettet bruger
18. oktober 2006 - 10:50 #2
Ok, umiddelbart virker det rigtigt, men jeg har en <div> som er vist som default (fordi man tidligere har gemt dette valg) så den vil blive vist selvom jeg vælger noget andet.

Her kommer min kode lige, så kan du måske hjælpe mig videre :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Rediger designafsnit - Fil fra filarkiv</title>
<script type="text/javascript">

var oActive = null;
function skift(where) {
    if(where > 0) {
        if (oActive) oActive.style.display = 'none';
        oActive = document.getElementById('div' + where);
        oActive.style.display = 'block';
    }
}

</script>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td class="form_heading" width="170" nowrap><strong>Aktiv version:</strong> </td><td width="100%" class="form_element">
<select name="version" id="version" onchange="skift(this.value)">
<option value="0">Vælg version
<option value="6">Version 1, redigeret 10. oktober 2006 kl. 14:04 af admin<option value="7" selected>Version 2, redigeret 10. oktober 2006 kl. 16:23 af admin</select>

</td></tr>
<tr><td class="hjaelpetekst" colspan="2">Vælg hvilken version der skal være aktiv.</td></tr>
<tr><td colspan="2" class="form_element">
<div id="div7">version 2</div><div style="display:none" id="div6">version 1</div></td></tr>
<tr><td colspan="2" class="form_normal"><button class="knap" type="submit">&nbsp;&nbsp;Gem&nbsp;&nbsp;</button>&nbsp;<button class="knap" onclick="window.close()" type="button">Fortryd</button></td></tr>
</table>
</body>
</html>
Avatar billede olebole Juniormester
18. oktober 2006 - 11:14 #3
- så gør vi vel sådan:

var oActive = null;
function skift(where) {
    if (where > 0) {
        if (oActive) oActive.style.display = 'none';
        oActive = document.getElementById('div' + where);
        oActive.style.display = 'block';
    }
}

window.onload = function() {
    oActive = document.getElementById("det_der_divs_ID");
}
Avatar billede Slettet bruger
18. oktober 2006 - 11:54 #4
Tusind tak :)

Giver du et svar?
Avatar billede olebole Juniormester
18. oktober 2006 - 12:44 #5
Selvtak  ;o)
Avatar billede olebole Juniormester
18. oktober 2006 - 13:21 #6
- og tak for points  ;o)
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