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

我该如何做到这一点？

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

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

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

            }
        }

    }

Answer 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

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

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

Answer 7

你可以使用jquery尝试下面的代码并首先导入jquery库

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

这是最简单的方法

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

7 个答案: