结合边栏菜单和旋转木马

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>