Question

即。两个旋转木马在同一个位置，但一个总是被隐藏，上面有两个按钮（锚点？）可以打开其中一个：

<div class="row">
                <div class="col-lg-12">

                    <div class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div id="floorsCarousel" class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                            </div>
                            <div class="item">
                                 <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                            </div>
                        </div>
                    </div>

我的JS似乎没有工作，这就是我在JS文件中的内容：

var floorsCarousel = document.getElementById("floorsCarousel");
    var spaceCarousel = document.getElementById("spaceCarousel");

    function floorPlans() {
        if (floorsCarousel.style.display==="none") {
            floorsCarousel.style.display="inherit";
        }
        if (spaceCarousel.style.display!=="none") {
            spaceCarousel.style.display="none";
        }
        return false;
    }

    function spacePlans() {
        if (spaceCarousel.style.display==="none") {
            spaceCarousel.style.display="inherit";
        }
        if (floorsCarousel.style.display!=="none") {
            floorsCarousel.style.display="none";
        }
        return false;
    }

JSFiddle

Answer 1

我为您创建了一个满足您需求的解决方案here。我已经创建了＆＃34;按钮＆＃34;切换你想要打开哪个旋转木马并将旋转木马包裹在一个带有attr的id="Car-#" class="Car-toggle"

的div中

<强> HTML

<div class="row">
    <button class="toggleCar" data-for="Car-1">Toggle 1</button>
    <button class="toggleCar" data-for="Car-2">Toggle 2</button>
    <div class="col-lg-12">
        <div id="Car-1" class="Car-toggle">carousel One
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div id="floorsCarousel" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                    </div>
                </div>
            </div>
        </div>
        <div id="Car-2" class="Car-toggle">carousel Two
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div id="floorsCarousel" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript（自使用引导程序以来的JQuery）

$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
    $('.Car-toggle').hide();
    $('#'+CarWrapperName).show();
});

//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();

如何创建同步轮播

1 个答案: