使用JavaScript实现隐藏/显示

我想设置一个功能,比如点击一个链接可以显示一个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

答案:
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";
    }        
}
  • 滚动到底部加载问题
  • 类似segmentfault消息部分的跳转该怎么写
  • socket.io如何解析登录成功后的cookie(web框架用了Express)
  • windows下webpack:output filename not configured
  • 【急切求助】vue router-view嵌套路由在子页面添加router-view标签报错。
  • html css 如何实现百度 谷歌样式的搜索框效果
  • vue iview 如何获取iview组件中data的值
  • WebStrom关于在<style lang="sass">中写sass格式不支持
  • 在js中,能不能实现ios block这样的功能?
  • 怎么获取当前 iframe 在页面可视区域中的位置信息?
  • 用json保存二进制数,怎么写?