Question

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>


#nav li { width: 100px; height: 20px; margin: 2px; background: green; cursor: pointer; }
#filtration {
    display: none;
    width: 100px; height: 100px;
    background: #000;
}
#solid {
    display: none;
    width: 100px; height: 100px;
    background: #c0c0c0;
}    
#chemistry {
    display: none;
    width: 100px; height: 100px;
    background: red;
}


<ul id="nav">
    <li onclick="showdiv('filtration');">Filtration</li>
    <li onclick="showdiv('solid');">Solidification</li>
    <li onclick="showdiv('chemistry');">Chemistry</li>
</ul>

<div id="filtration">&nbsp;</div>
<div id="solid">&nbsp;</div>
<div id="chemistry">&nbsp;</div>

设置导航栏以显示/隐藏内容，上面的代码工作正常，但问题是我希望一个div在您最初来到页面时显示内容。上面的代码仅在首先隐藏所有div时才有效。

你可以设置一个div来显示：block，但是如果你点击另一个导航链接而不是显示的那个，则没有任何反应。您必须单击设置为显示的相应div的链接：首先阻止，然后您可以继续单击其他链接 - 无用。

如何修改此内容以使第一个内容div（#filtration）最初设置为display：block，然后用户可以继续点击UL中的任何链接并显示该内容？

http://jsfiddle.net/2MpmK/3/

谢谢！

Answer 1

您应该在显示所选的div之前隐藏其他div：

function showdiv(id) {
    var divs = document.getElementsByTagName('div'),
        div  = document.getElementById(id);
    for (var i=0; i<divs.length; i++) {
        divs[i].style.display = 'none';
    }
    div.style.display = 'block';
}

FIDDLE

或者使用jQuery并且没有那些onclick函数，你可以这样做：

<ul id="nav">
    <li data-id="filtration">Filtration</li>
    <li data-id="solid">Solidification</li>
    <li data-id="chemistry">Chemistry</li>
</ul>

-

$(function() {
    $('#nav li').on('click', function() {
        $('#'+$(this).data('id')).show().siblings('div').hide();
    });
});

FIDDLE

Answer 2

使用jquery：

function showdiv(id) 
{
    $('.content').hide();
    $('#'+id).toggle();
}

#filtration {
    width: 100px; height: 100px;
    background: #000;
}

<div id="filtration" class="content">&nbsp;</div>
<div id="solid" class="content">&nbsp;</div>
<div id="chemistry" class="content">&nbsp;</div>

jquery显示/隐藏最初有效的div

2 个答案: