jquery 显示/隐藏 div，其中一个最初处于活动状态答案

【问题标题】：jquery show/hide divs with one initially activejquery 显示/隐藏 div，其中一个最初处于活动状态
【发布时间】：2012-11-29 23:50:56
【问题描述】：

<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 (#filter) 最初设置为 display:block，然后用户可以继续单击 UL 中的任何链接并显示该内容？

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

谢谢！

【问题讨论】：

标签： jquery css

【解决方案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

【讨论】：

太好了，谢谢。 + 1 用于摆脱那些丑陋的点击功能。

【解决方案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>

【讨论】：