結合邊欄菜單和旋轉木馬

Question

我有一個邊欄菜單和一個引導程序旋轉木馬，我設法將旋轉木馬連接到邊欄菜單，以便根據旋轉木馬中顯示的項目突出顯示菜單中的相應選項。

我該如何做到這一點，以便從菜單中選擇一個選項時，會顯示傳送帶中的相應項目。

這裏是我的代碼：

$('.carousel').on('slid.bs.carousel', function() { 
 
    var carouselData = $(this).data('bs.carousel'); 
 
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); 
 

 
    $('.result p') 
 
    .removeClass('active-p') 
 
    .eq(currentIndex) 
 
    .addClass('active-p'); 
 
});

.active-p { 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="sideMenu_div" class="result"> 
 
    <p class="active-p">Option 1</p> 
 
    <p> Option 2</p> 
 
    <p> Option 3</p> 
 
</div> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <div>Item 1</div> 
 
    </div> 
 
    <div class="item"> 
 
     <div>Item 2</div> 
 
    </div> 
 
    <div class="item"> 
 
     <div>Item 3</div> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Answer 1

查找與jQuery的指標，告訴引導傳送帶移動到該索引。

$('.carousel').on('slid.bs.carousel', function() { 
 
    var carouselData = $(this).data('bs.carousel'); 
 
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); 
 

 
    $('.result p') 
 
    .removeClass('active-p') 
 
    .eq(currentIndex) 
 
    .addClass('active-p'); 
 
}); 
 

 
$('#sideMenu_div>p').on('click', function(e) { 
 
    var currentIndex = $(this).index(); 
 
    $('#myCarousel').carousel(currentIndex); 
 
})

.active-p { 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="sideMenu_div" class="result"> 
 
    <p class="active-p">Option 1</p> 
 
    <p> Option 2</p> 
 
    <p> Option 3</p> 
 
</div> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <div>Item 1</div> 
 
    </div> 
 
    <div class="item"> 
 
     <div>Item 2</div> 
 
    </div> 
 
    <div class="item"> 
 
     <div>Item 3</div> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>