[javascript] Toggle display: none/block - Softwareontwikkeling

donderdag 10 mei 2007 14:04

Acties:

Topicstarter

Kort gezegd moet na het klikken op een link alle div's met de class "content" verborgen worden behalve de div die aangegeven is bij de link.

Nu wordt na het klikken alle div's op de gehele pagina verborgen, dat is dus niet de bedoeling. Wat doe ik fout?

Ik heb de volgende code in elkaar gezet:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<script type="text/javascript">
function toggleShowHide(selectedDiv) {
    var divs = document.getElementsByTagName('DIV');
    for (var i=0; i < divs.length; i++) {
        if (document.getElementsByTagName("DIV")[i].class = content) {
            if (document.getElementsByTagName("DIV")[i].id != selectedDiv) {
                document.getElementsByTagName("DIV")[i].style.display = "none";
                //document.getElementById("menu").style.display = "";
            } else {
                document.getElementsByTagName("DIV")[i].style.display = "";
            }
        }
    }
}
</script>

</head>

<body>

<div id="menu"><a href="#" onclick="toggleShowHide('textblok');">Tekst blok</a> | <a href="#" onclick="toggleShowHide('imageblok');">Image blok</a></div>

<div class="content" id="textblok" style="display:none;">
<h1>Tekst</h1><hr />
</div>

<div class="content" id="imageblok" style="display:none;">
<h1>Afbeelding</h1><hr />
</div>

</body>
</html>

donderdag 10 mei 2007 14:13

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

.class moet volgens mij zowieso .className zijn.
Daarnaast: wat heb je zelf al geprobeerd? Heb je al gedebugged? Debuggen: Hoe doe ik dat?

[ Voor 30% gewijzigd door RobIII op 10-05-2007 14:16 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 10 mei 2007 14:17

Acties:

OkkE

CSS influencer :+

Wat RobIII zegt, en verder moet volgens mij je className tussen quotes, aangezien het een string is. Al weet ik niet zeker of dit noodzakelijk is; netter iig wel.

-- edit --

Verder wat tips;
• Ik zou je div's bij het laden van de pagina via javascript op display:none zetten, en niet al gelijk via CSS. Hiermee voorkom je dat mensen zonder javascript een deel missen.
• Je gebruikt elke keer opnieuw de "getElementsByTag", terwijl je volgens mij je array "divs" uit je loop kan hergebruiken.

[ Voor 50% gewijzigd door OkkE op 10-05-2007 14:21 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 10 mei 2007 14:20

Acties:

DeepFreeze.NL

Topicstarter

OkkE schreef op donderdag 10 mei 2007 @ 14:17:
Wat RobIII zegt, en verder moet volgens mij je className tussen quotes, aangezien het een string is. Al weet ik niet zeker of dit noodzakelijk is; netter iig wel.

Ja, inmiddels is (na bevestiging van het zoeken op internet) className geworden, ook zag ik net dat ik inderdaad de haakjes vergeten was. Inmiddels heb ik het aangepast, maar nog steeds geen resultaat.

donderdag 10 mei 2007 14:26

Acties:

OkkE

CSS influencer :+

DeepFreeze.NL schreef op donderdag 10 mei 2007 @ 14:20:
[...]

Ja, inmiddels is (na bevestiging van het zoeken op internet) className geworden, ook zag ik net dat ik inderdaad de haakjes vergeten was. Inmiddels heb ik het aangepast, maar nog steeds geen resultaat.

Je hebt een vrij standaard fout gemaakt, die met debuggen vaak wel opgelost wordt: een if-statement met maar één =, waardoor je niet vergelijkt maar de waarde toekent. Elke div kreeg dus de class "content".

donderdag 10 mei 2007 14:31

Acties:

DeepFreeze.NL

Topicstarter

OkkE schreef op donderdag 10 mei 2007 @ 14:26:
[...]

Je hebt een vrij standaard fout gemaakt, die met debuggen vaak wel opgelost wordt: een if-statement met maar één =, waardoor je niet vergelijkt maar de waarde toekent. Elke div kreeg dus de class "content".

Dankje! Grr, ik wist dat het iets kleins moest zijn

Tevens bedankt voor je tips, ik zal ze er allebei in verwerken

donderdag 10 mei 2007 14:50

Acties:

DeepFreeze.NL

Topicstarter

OkkE schreef op donderdag 10 mei 2007 @ 14:17:
Wat RobIII zegt, en verder moet volgens mij je className tussen quotes, aangezien het een string is. Al weet ik niet zeker of dit noodzakelijk is; netter iig wel.

-- edit --

Verder wat tips;
• Ik zou je div's bij het laden van de pagina via javascript op display:none zetten, en niet al gelijk via CSS. Hiermee voorkom je dat mensen zonder javascript een deel missen.
• Je gebruikt elke keer opnieuw de "getElementsByTag", terwijl je volgens mij je array "divs" uit je loop kan hergebruiken.

Ik ben nu jouw tweede tip aan het toepassen, maar het wil nog niet helemaal lukken. Wanneer ik nu de pagina laad worden niet de desbetreffende div's verborgen gemaakt. ik heb inmiddels het volgende:

JavaScript:

function init() {
    var divs = document.getElementsByTagName("div");
    for (var i=0; i < divs.length; i++) {
        if (divs[i].className == "content") {
            divs[i].style.display = "none";
        }
    }
}

function toggleShowHide(selectedDiv) {
    var divs = document.getElementsByTagName("div");
    for (var i=0; i < divs.length; i++) {
        if (divs[i].className == "content") {
            if (divs[i].id != selectedDiv) {
                divs[i].style.display = "none";
            } else {
                divs[i].style.display = "";
            }
        }
    }
}
window.onload = init();

Heb het al: window.onload = init(); --> window.onload = init;

[ Voor 8% gewijzigd door DeepFreeze.NL op 10-05-2007 15:04 ]

donderdag 10 mei 2007 15:10

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

DeepFreeze.NL schreef op donderdag 10 mei 2007 @ 14:55:
wat doe ik fout?

DeepFreeze.NL schreef op donderdag 10 mei 2007 @ 15:04:
Heb het al: window.onload = init(); --> window.onload = init;

Doe jezelf (en ons) een lol en kijk voortaan effe verder voordat je post. Het is in de devschuur niet gebruikelijk dat we iemand aan het handje gaan houden en dit had je prima met debuggen kunnen oplossen. Nogmaals: Debuggen: Hoe doe ik dat?

[ Voor 11% gewijzigd door RobIII op 10-05-2007 15:55 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Pagina: 1

Reageer