Bootstrap：滑塊無法正常工作

Question

我正在使用這個標簽滑塊。 請訪問鏈接以查看它的實際效果。 這是我的CODE

 $(document).ready(function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }); $('#myCarousel').bind('slid', function() { // Get currently selected item var item = $('#myCarousel .carousel-inner .item.active'); // Deactivate all nav links $('#myCarousel .nav li').removeClass('active'); // Index is 1-based, use this to activate the nav link based on slide var index = item.index() + 1; $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active'); }); }); 

 #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; } 

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a> </li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a> </li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a> </li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a> </li> </ul> </div> <!-- End Carousel --> </div> 

我包含的jQuery文件

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

問題是我的滑塊活動標簽不會改變。 First tab is always active ，頂部滑塊保持不變。 如果有人可以幫我，請

Answer 1

請將輪播收聽的事件從slid更改為slid.bs.carousel

 $(document).ready(function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }); $('#myCarousel').on('slid.bs.carousel', function() { // Get currently selected item var item = $('#myCarousel .carousel-inner .item.active'); // Deactivate all nav links $('#myCarousel .nav li').removeClass('active'); // Index is 1-based, use this to activate the nav link based on slide var index = item.index() + 1; $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active'); }); }); 

 #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; } 

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services"> <div class="carousel-caption"> <h3>Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a> </li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a> </li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a> </li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a> </li> </ul> </div> <!-- End Carousel --> </div>