Javascript 显示一个div并隐藏上一个显示div

我有一些链接，点击时会显示一个div。单击另一个链接时，它应该显示链接的关联div并隐藏以前显示的div

HTML

CSS

我如何才能做到这一点？

尝试：

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

---

您可以这样做：

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

您可以使用jquery尝试下面的代码，然后首先导入jquery库

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

这是最简单的方法
尝试以下方法：

函数取消隐藏（divID）{
var divIds=[“text1”、“text2”、“text3”]；
for（var i=0，len=divIds.length；i
您还可以将要隐藏的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';
            }
         }
    }
}

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

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



功能显示（id）{
var item=document.getElementById（id）；
var all=document.getElementsByClassName（'hidden'）；
对于（var i=0；i
 var divs = document.getElementById('wrapper').getElementsByTagName('div');

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

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

            }
        }

    }

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

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

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