1

我有这个 HTML 结构：

<div id="wrap_menu">
    <ul class="menu">
        <li><a href="#modelos" class="link">Home</a></li>
        <li><a href="#empresa" class="link">Empresa</a></li>
        <li><a href="#galeria" class="link">Galeria</a></li>
        <li class="big"><a href="#representantes" class="link">Representantes</a></li>
        <li><a href="cadastro" class="link">Cadastro</a></li>
        <li><a href="contato" class="link">Contato</a></li>
    </ul>
</div>

<div id="conteudo">

    <div id="modelos">
        <ul id="fotos_modelo">
            <li><img src="modelos/modelo_1.png"/></li>
            <li><img src="modelos/modelo_2.png"/></li>
            <li><img src="modelos/modelo_3.png"/></li>
        </ul>
    </div>

    <div id="empresa">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><br/>
        <h4>Aliquam tincidunt mauris eu risus.</h4>
    </div>

</div>

而这个使内容可见/隐藏的JavaScript：

$('.menu a').click(function(e) {
    e.preventDefault();
    hideContentDivs();
    var tmp_div = jQuery(this).parent().index();
    jQuery('.menu li').eq(tmp_div).addClass("selected");
    jQuery('#conteudo div').eq(tmp_div).fadeIn(1000);
});         

function hideContentDivs(){
    jQuery('#conteudo div').each(function(){
        jQuery(this).fadeOut();
        jQuery('.menu li').removeClass("selected");
    });
}
hideContentDivs();

DIV我的问题：如果我在我的内容中添加另一个元素，例如：

<div id="modelos">
    <div id="this_div">
        ...
    </div>
</div>

我this_div的没有显示...

见：http: //jsfiddle.net/hQ7y5/130/

4

3 回答 3

4

更改.main div为.main>div。然后它将仅隐藏直接子div

function hideContentDivs() {
    $('.main>div').each(function () {
        $(this).hide();
    });
}

http://jsfiddle.net/hQ7y5/131/

于 2013-07-04T16:47:06.107 回答
1

您的 jsfiddle 中的第一个更正是，您使用了 'link3' id 两次，请更正。其次使用：

function hideContentDivs(){
    $('.main>div').each(function(){
    $(this).hide();});
}

工作演示：http: //jsfiddle.net/hQ7y5/132/

于 2013-07-04T17:04:02.377 回答
0 
function hideContentDivs(){
    jQuery('#conteudo div').each(function(){
        jQuery(this).fadeOut();
        jQuery('.menu li').removeClass("selected");
    });
}
hideContentDivs();

这将隐藏#conteudo（任何深度）内的所有 div。如果您想立即使用孩子#conteudo > div

于 2013-07-04T16:47:36.827 回答