Question

我正在尝试编写一个网站，现在我已经设计了我的前端，我想在标题中写一个链接说“Portfolio”，它应该隐藏除页眉和页脚之外的所有内容。

我的HTML就是这样：

ABC

我的CSS：

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

最后我的脚本是：

    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;
}

非常感谢你的帮助，提前！ -Kevin

Answer 1

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

jQuery隐藏/显示不同的元素疑难解答

1 个答案: