Question

所以我有2个div并排。我想要做的是隐藏/删除左侧的div并将其替换为右侧的div，它将向左移动并占据右侧div的初始位置。

我希望在点击关于链接时完成此操作。

HTML -

<div class="nav">
            <div class="column c1">
                <a href="#">About</a>
            </div>

        </div>

        <div id="feed" class="feed" style="margin-top: 54px;">

            <div class="column c2">
                <p>
                    Creatives of Colour (C-oC) is an independent directory
                    that provides you with up to date information on
                    current, and future work of creatives of colour
                    being showcased in the UK. C-oC aims to contribute to the
                    necessary exaltation of talented artists within the various
                    ethnic minorities within the UK.
                </p>
                <p>
                    <a href="#">Find out more about Creatives of Colour..</a>
                </p>
            </div>

    <!-- Show on click -->

    <div class="feed-show" style="margin-top: 54px;">

            <div class="column c2">
                <p>
                    Creatives of Colour (C-oC) is an independent directory
                    that provides you with up to date information on
                    current, and future work of creatives of colour
                    being showcased in the UK. C-oC aims to contribute to the
                    necessary exaltation of talented artists within the various
                    ethnic minorities within the UK.
                </p>
                <p>
                    <a href="#">Find out more about Creatives of Colour..</a>
                </p>
            </div>


        </div>

CSS -

    .c1 {
    max-width: 24%;
}

.column {
    position: relative;
    float:left;
    padding-right: 1%;
    width: 585px;
}

/* feed */
.feed {
    width: 96%;
    left: 2%;
    margin-top: 75px;
    padding-left: 2px;
}

.c2 {
    max-width: 49%;
}

.feed-item {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 25px;
    padding-top:2.5%;
}

.f-artist {
    padding-top: 1%;
}

这个想法是为网站提供一页风格。

希望这只能通过CSS实现，但jQuery建议更受欢迎。

以下是codepen

谢谢！

Answer 1

您应该尝试使用jquery .hide（）函数隐藏所需的分区。你的css似乎还可以，因为除法是左边的浮动。

$(document).ready(function){
    //about click
    $('.c1').on('click',function(){
        $('#feed').hide()

    })
}

隐藏div并在初始位置显示新的

1 个答案: