jquery - jquery 显示/隐藏一个最初处于活动状态的 div

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 设置为 display:block，但是如果您单击另一个导航链接而不是显示的链接，则不会发生任何事情。您必须先单击设置为 display:block 的相应 div 的链接，然后才能继续单击其他链接-无用。

我该如何修改它，使第一个内容 div (#filtering) 最初设置为 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';
}
​

小提琴

或者使用 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();
    });
});
​

小提琴

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

​</p>