jQuery隐藏/显示不同元素的故障排除

Question

我正在尝试编程一个网站，现在，我已经设计了我的前面，我想要一个链接在头部说"投资组合"应该隐藏一切，但头和脚。

我的HTML如下:

    <div class="header" id="front-show">
        <div class="header-kevin-vfx">
            <a href="#"><h1 id="front-show">Kevin VFX</h1></a>
        </div>
        <div class="header-portfolio"  id="portfolio-show">
            <a href="#"><h1>Portfolio</h1></a>
        </div>
    </div>
<div class="content-wrapper">
    <div class="site-title hidden">
        <h1>Kevin VFX</h1>
        <p>Marketing the modern way</p>
    </div>
</div>
<div class="portfolio-wrapper">
    <div class="portfolio">
        <h1>Portfolio</h1>
        <p>Click a video thumbnail to watch a video</p>
    </div>
</div>    
    <div class="footer">
        <div class="copyright">
            <p>Copyright 2016 © Kevin From</p>
        </div>
    </div>

我的CSS:

    div.content-wrapper {
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0,0,0,0.1);
    z-index:1;
    position:fixed;
    transform:translate(-50%,-50%);
    top:50%;left:50%;
}
div.header {
    z-index:3;
    height:70px;
    background-color:rgba(204,204,204,0.3);
    width:100%;
    position: absolute;
    top:0;
}
div.header a h1 {
    text-decoration: none;
    color:rgba(250,250,250,0.7);
    text-transform: uppercase;
}
div.header a h1:hover {
    color:rgba(255,255,255,1);
}
div.header div.header-kevin-vfx {
    position:absolute;
    top:0;
    left:0;
    padding-left:7px;
}
div.header div.header-portfolio{
    position:absolute;
    right:0;
    top:0;
    padding-right:7px;
} 
div.footer {
    z-index:3;
    height:30px;
    background-color:rgba(204,204,204,0.3);
    position:absolute;
    bottom:0;
    width:100%;
}
div.footer div.copyright p {
    text-align: center;
    font-size:1em;
}

和我的最后一个脚本是:

    $(document).ready(function () {
$('div.portfolio-wrapper').hide();        
$('div.hidden')
        .fadeIn(1500)
        .slideUp(500)
        .slideDown(500)
        .removeClass('hidden');
});
$('#front-show').onclick(function () {
    $('.portfolio-wrapper').hide(500).delay(500);
    $('.content-wrapper').show(500);
});
$('#portfolio-show').onclick(function () {
    $('.content-wrapper').hide(500).delay(500);
    $('.portfolio-wrapper').show(500);
});

非常感谢您的帮助，提前!凯文

Answer 1

$('#front-show').find('.content-wrapper, .portfolio-wrapper').hide();