节替换为jquery中的另一节

我有两个不同id的部分，第一部分是

id=“nature”

，第二部分是

id=“birdy”

。两个部分都包含旋转木马，但我隐藏了一个部分

我已经应用了这个jquery代码来替换单击的部分。当我点击bird按钮时，第二部分被第一部分成功替换

但当我点击“自然”按钮时，什么也没发生。 我想要的是，当页面设置为第二节（

id=“birdy”

）时，单击“自然”按钮，它将再次显示第一节（

id=“nature”

）

请帮帮我

HTML:

<section id="nature">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="one" src="img/page.jpg" alt="...">
                <div class="carousel-caption">
                    pic1
                </div>
            </div>
            <div class="item">
                <img class="two" src="img/parallax.jpg" alt="...">
                <div class="carousel-caption">
                    pic2
                </div>
            </div>  

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic3
                </div>
            </div>    
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<section id="birdy">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="one" src="Bimgs/file.jpeg" alt="...">
                <div class="carousel-caption">
                    pic1
                </div>
            </div>
            <div class="item">
                <img class="two" src="Bimgs/file2.jpeg" alt="...">
                <div class="carousel-caption">
                    pic2
                </div>
            </div>  

            <div class="item">
                <img class="three" src="Bimgs/file3.jpeg" alt="...">
                <div class="carousel-caption">
                    pic3
                </div>
            </div>

            <div class="item">
                <img class="three" src="Bimg/.jpeg" alt="...">
                <div class="carousel-caption">
                    pic4
                </div>
            </div>

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic5
                </div>
            </div>

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic6
                </div>
            </div>    
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<!-- button -->
<div class="container ntr-btn">
    <a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn">
    <a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>

#birdy {
  display: none;
}

<script type="text/javascript">
$(document).ready(function () {
    $('.bird-btn').click(function (e) {
        /* Act on the event */
        $('#birdy').css('display', 'initial');
        $('#nature').replaceWith('<section id="birdy"></section>');
    });
    $('.ntr-btn').click(function (e) {
        /* Act on the event */
        $('#birdy').css('display', 'none');
        $('#birdy').replaceWith('<section id="nature"></section>');

    });
});
</script>

Jquery:

<section id="nature">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="one" src="img/page.jpg" alt="...">
                <div class="carousel-caption">
                    pic1
                </div>
            </div>
            <div class="item">
                <img class="two" src="img/parallax.jpg" alt="...">
                <div class="carousel-caption">
                    pic2
                </div>
            </div>  

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic3
                </div>
            </div>    
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<section id="birdy">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="one" src="Bimgs/file.jpeg" alt="...">
                <div class="carousel-caption">
                    pic1
                </div>
            </div>
            <div class="item">
                <img class="two" src="Bimgs/file2.jpeg" alt="...">
                <div class="carousel-caption">
                    pic2
                </div>
            </div>  

            <div class="item">
                <img class="three" src="Bimgs/file3.jpeg" alt="...">
                <div class="carousel-caption">
                    pic3
                </div>
            </div>

            <div class="item">
                <img class="three" src="Bimg/.jpeg" alt="...">
                <div class="carousel-caption">
                    pic4
                </div>
            </div>

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic5
                </div>
            </div>

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic6
                </div>
            </div>    
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<!-- button -->
<div class="container ntr-btn">
    <a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn">
    <a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>

#birdy {
  display: none;
}

<script type="text/javascript">
$(document).ready(function () {
    $('.bird-btn').click(function (e) {
        /* Act on the event */
        $('#birdy').css('display', 'initial');
        $('#nature').replaceWith('<section id="birdy"></section>');
    });
    $('.ntr-btn').click(function (e) {
        /* Act on the event */
        $('#birdy').css('display', 'none');
        $('#birdy').replaceWith('<section id="nature"></section>');

    });
});
</script>

$（文档）.ready（函数（）{
$（'.bird btn'）。单击（函数（e）{
/*对事件采取行动*/
$（'birdy'）.css（'display'，'initial'）；
$（'#nature'）。替换为（''）；
});
$（'.ntr btn'）。单击（函数（e）{
/*对事件采取行动*/
$（'#birdy'）.css（'display'，'none'）；
$（'#birdy'）。替换为（''）；
});
});

一个简单的解决方案可能是（未经测试）：

换句话说，只需根据您单击的按钮切换这些部分的显示

---

编辑（在最后一行代码中更改了“#birdy”=>”#nature）您是否尝试过简化您的结构？您可以只显示和隐藏滑块，而不是通过插入和删除元素来操作DOM：

HTML-将泛型类添加到按钮：

<div class="container ntr-btn slide-selector">
    <a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn slide-selector">
  <a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>

---

请注意，当您单击“.ntr btn”时，您将#birdy部分设置为“无”，并将该部分替换为“自然”部分。所以，现在自然部分在birdy中，但它的显示没有。但是我的朋友，鸟类部分Carousel控件不工作@KyleMeenehan@AishaSalman，我的荣幸！当你说“鸟”部分旋转木马控件不工作时，你是指左右按钮吗？你能把代码放在代码笔或JSFIDLE上吗？我现在已经解决了。无论如何！再次感谢：）@kyleMeenehanNo我的朋友，这东西对我不起作用。但是谢谢你帮我尝试：）@o4ohelSorry，请看我的编辑。。。（把小鸟变成自然……）