Javascript 引导转盘-滑块下的更改部分_Javascript_Twitter Bootstrap 3

Javascript 引导转盘-滑块下的更改部分

javascript twitter-bootstrap-3

Javascript 引导转盘-滑块下的更改部分,javascript,twitter-bootstrap-3,Javascript,Twitter Bootstrap 3,我有你典型的引导旋转木马，里面有几张幻灯片，我遇到的问题是，每当有新幻灯片出现时，我希望滑块下的部分发生变化。我在index-3.html中包含了一个javascript片段但无法使其正常运行。以下是HTML： <!DOCTYPE html> <html> <head>  <

我有你典型的引导旋转木马，里面有几张幻灯片，我遇到的问题是，每当有新幻灯片出现时，我希望滑块下的部分发生变化。我在index-3.html中包含了一个javascript片段但无法使其正常运行。以下是HTML：

<!DOCTYPE html>
<html>    
<head>    
    <!-- Website Title & Description for Search Engine purposes -->
    <title>Code a Responsive Website with Twitter Bootstrap 3</title>
    <meta name="description" content="Learn how to code your first responsive website with the new Twitter Bootstrap 3.">    
    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="includes/css/styles.css">    
    <!-- Include Modernizr in the head, before any other Javascript -->
    <script src="includes/js/modernizr-2.6.2.min.js"></script>    
</head>    
<body>    
    <div class="container" id="main">    
        <!-- Carousel -->
        <div class="carousel slide" id="myCarousel">    
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                <li data-slide-to="1" data-target="#myCarousel"></li>
                <li data-slide-to="2" data-target="#myCarousel"></li>
            </ol>    
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active" id="slide1">
                    <div class="carousel-caption">
                        <h4>Bootstrap 3</h4>
                        <p>Learn how to build your first responsive website with the brand new Twitter Bootstrap 3!</p>
                    </div>
                    <!-- end carousel-caption-->
                </div>
                <!-- end item -->    
                <div class="item" id="slide2">
                    <div class="carousel-caption">
                        <h4>Learn to code a website in 4-hours!</h4>
                        <p>PSD to HTML5 &amp; CSS3 is a popular Udemy course that has helped thousands of aspiring web designers launch their web design career.</p>
                    </div>
                    <!-- end carousel-caption-->
                </div>
                <!-- end item -->    
                <div class="item" id="slide3">
                    <div class="carousel-caption">
                        <h4>Web Hosting 101</h4>
                        <p>Learn how to buy a perfect domain name and hosting package, and get your website live on the web with ease.</p>
                    </div>
                    <!-- end carousel-caption-->
                </div>
                <!-- end item -->
            </div>
            <!-- carousel-inner -->

            <!-- Controls -->
            <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
            <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

        </div>
        <!-- end myCarousel -->    
        <div id="collapseGroup">
            <div class="collapse for-slide-0 in">
                <div class="well">
                    <h3>Text for Slide 0</h3>
                </div>
            </div>
            <div class="collapse for-slide-1 for-slide-3">
                <div class="well">
                    <h3>Text for Slides 1 and 3</h3>
                </div>
            </div>
            <div class="collapse for-slide-2">
                <div class="well">
                    <h3>Text for Slide 2</h3>
                </div>
            </div>
        </div>
    </div>


用Twitter Bootstrap 3为响应性网站编码



引导程序3
了解如何使用全新的Twitter Bootstrap 3构建您的第一个响应性网站
学习在4小时内编写网站代码！
从PSD到HTML5&；CSS3是一门很受欢迎的Udemy课程，它帮助成千上万有抱负的网页设计师开始了他们的网页设计生涯
网页托管101
了解如何购买一个完美的域名和托管软件包，让您的网站在网上轻松生活
幻灯片0的文本
幻灯片1和3的文本
幻灯片2的文本

Javascript代码段：

<script>
    $(document).ready(function() {
        $('#myCarousel').on('slide.bs.carousel', function(e) {
            var forSlide = $('.for-slide-' + $(e.relatedTarget).index());
            if (!forSlide.hasClass('in')) {
                $('#collapseGroup>.collapse.in').collapse('hide');
                forSlide.collapse('show');
            }
        })
    });
</script>


$（文档）.ready（函数（）{
$（#myCarousel'）。on（'slide.bs.carousel'，函数（e）{
var forSlide=$（'.对于幻灯片-'+$（e.relatedTarget）.index（））；
if（！forSlide.hasClass（'in'））{
$（'#collapseGroup>.collapse.in'）.collapse（'hide'）；
崩塌（“显示”）；
}
})
});

我将感谢任何帮助

您是否可以在这里发布相关代码，并创建一个JSFIDLE，以便易于理解和解决问题。如果可能的话，在codepen或jsfiddle上使用工作演示重现上述代码。我们可以好好看看。