结合侧边栏菜单和轮播

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 查找索引，并告诉 Bootstrap 轮播移动到该索引。

$('.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>