使用JavaScript实现隐藏/显示-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用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; }

展开
收起
a123456678 2016-03-25 14:56:14 1979 0
1 条回答
写回答
取消 提交回答
  • a123456678
    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";
        }        
    }
    2019-07-17 19:14:24
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载