隐藏/显示Divs-初始状态

Question

Just having a bit of difficulty with showing/hiding divs -

Basically what I'm trying to achieve is to have 3 different links, each corresponding to three different divs, only one of which shows at any one time. I've referred to this tutorial - http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ (section headed 'Here is a new demo in response to a request where only one div is displayed at any one time')

It's all working correctly, in that when I click any of my links, the correct div shows. The only problem I'm having is the initial state - I only want the first div to show initially, but currently they all display simultaneously, until I click one of the links.

I've copied the java on the website -

<script> function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("class");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }
} </script>

My divs then have:

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">

These 3 divs all contain a number of other divs, none of which have 'newboxes' in the class - but perhaps this interferes?

The links sit outside of these 3 divs:

<a href="javascript:showonlyone('newboxes1');">Learn HTML</a><a href="javascript:showonlyone('newboxes2');">Box2</a><a href="javascript:showonlyone('newboxes3');">Box3</a>

As far as I can see I've copied the method shown on the tutorial exactly, but for that my initial state doesn't work correctly, whereas it does on the tutorial page.

Any ideas? Thanks!

Answer 1

function showonlyone(element){
    for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
        var div = document.getElementById('newboxes'+i);
        if(i == element){
            div.style.display = 'block';
        }else{
            div.style.display = 'none';
        }
    }
}

to use:

showonlyone(1);
//This will show the div with ID="newboxes1"

Answer 2

is it not as simple as

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">

Answer 3

Try this in your header

<script>
    function showonlyone(thechosenone) {
        var newboxes = document.getElementsByTagName("div");
        for (var x = 0; x < newboxes.length; x++) {
            name = newboxes[x].getAttribute("class");
            if (name == 'newboxes') {
                if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
                } else {
                    newboxes[x].style.display = 'none';
                }
            }
        }
    }
</script>

Followed by this for the div boxes and links

<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>

<div class="newboxes" id="newboxes1">
    <iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
    <iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
 <div class="newboxes" id="newboxes3">
    <iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>