使用JavaScript实现隐藏/显示

Question

我想设置一个功能，比如点击一个链接可以显示一个div。当点击另一个链接时，之前的显示的div自动隐藏，新的div显示出来。我应该如何实现？
我的代码如下：
HTML

<a href="javascript:unhide('text1');">Text 1</a> 
<a href="javascript:unhide('text2');">Text 2</a>
<a href="javascript:unhide('text3');">Text 3</a>
<div id="text1" class="unhidden"> 
    This will show up when the Text 1 link is pressed.
</div>
<div id="text2" class="hidden"> 
    This will show up when the Text 2 link is pressed.
</div>
<div id="text3" class="hidden">
    This will show up when the Text 3 link is pressed.
</div>

Javascript

function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className='unhidden';
    }
}

CSS

.hidden { display: none; }
.unhidden { display: block; }

原问题: Show one div and hide the previous showing div

Answer 1

答案：
hsz：Try it

function unhide(divID) {
    var unhidden = document.getElementsByClassName('unhidden');
    for (var k in unhidden) {
        unhidden[k].className='hidden';
    }

    var item = document.getElementById(divID);
    if (item) {
        item.className='unhidden';
    }
}

---

OlivierH：实现方法如下

function unhide(divID) {
    var divs = document.getElementsByTagName('div');
    foreach(var div in divs){
        div.className = 'hidden';
        if(div.id == divID)
            div.className = 'unhidden';
    } 
}

但需要注意 document.getElementsByTagName('div'); 它将返回你文档里的所有div，你可以选择给它封装起来。例如：
HTML

<div id="wrapper">
    <div id="text1" class="unhidden"> 
        This will show up when the Text 1 link is pressed.
    </div>
    <div id="text2" class="hidden"> 
        This will show up when the Text 2 link is pressed.
    </div>
    <div id="text3" class="hidden">
        This will show up when the Text 3 link is pressed.
    </div>
</div>

JS

var divs = document.getElementById('wrapper').getElementsByTagName('div');

---

Andrew：下面这中方法也适用，DEMO：http://jsfiddle.net/L79H7/1/

function unhide(divID) {

       var divIds = [ "text1", "text2", "text3" ];
       for ( var i = 0, len = divIds.length; i < len; i++) {
           var item = document.getElementById(divIds[i]);
           if (item) {

               item.className = divID == divIds[i] ? 'unhidden' : 'hidden';

           }
       }

   }

Dropout：其实你并不需要链接，只要能实现功能即可。
HTML

<p onclick="unhide('text1')">Text 1</p> 
<p onclick="unhide('text2')">Text 2</p>
<p onclick="unhide('text3')">Text 3</p>
<div id="text1" class="unhidden"> 
This will show up when the Text 1 link is pressed.
</div>
<div id="text2" class="hidden"> 
This will show up when the Text 2 link is pressed.
</div>
<div id="text3" class="hidden">
This will show up when the Text 3 link is pressed.
</div>

JS

function unhide(id){
    yourElement = document.getElementById(id);
    if(yourElement.className == "unhidden"){
        yourElement.className = "hidden";
        }else{
        yourElement.className = "unhidden";
    }        
}