显示一个 div 并隐藏上一个显示的 div答案

【问题标题】：Show one div and hide the previous showing div显示一个 div 并隐藏上一个显示的 div
【发布时间】：2013-11-19 17:21:24
【问题描述】：

我有一些链接会在点击时显示一个 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; }

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html css

【解决方案1】：

尝试：

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';
    }
}

【讨论】：

【解决方案2】：

你可以这样做：

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');

【讨论】：

【解决方案3】：

试试这个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';

            }
        }

    }

【讨论】：

【解决方案4】：

您还可以将要隐藏的 div 的名称存储在一个数组中，并在取消隐藏时对其进行迭代：

var divs= new Array("text1", "text2", "text3");

function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className='unhidden';
    }
    for (var i in divs){
        if (divs[i] != divID){
            item = document.getElementById(divs[i]);
            if (item) {
                item.className='hidden';
            }
         }
    }
}

JSFiddle

【讨论】：

【解决方案5】：

您不需要为此提供确切的链接，但如果您坚持将其更改为：

<a href="#" onclick='unhide("text3");'>Text 3</a>

否则你可以改成：

<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>

添加或删除类的函数应如下所示：

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

【讨论】：

【解决方案6】：

demo

<div id="text1" class="hidden"> 1 </div>
<div id="text2" class="hidden"> 2 </div>
<div id="text3" class="hidden"> 3 </div>

.hidden{ display:none; }
#text1{ display: block; }

function show(id) {
    var item = document.getElementById(id);
    var all  = document.getElementsByClassName('hidden');
    for(var i=0; i<all.length; i++)all[i].style.display = 'none';
    if(item)item.style.display = 'block';
}

【讨论】：

【解决方案7】：

你可以用jquery试试下面的代码，先导入jquery库

    $('#text1').show();
    $('#text2').hide();

这是最简单的方法

【讨论】：