Javascript 按列表项的引导传送带控制

我的问题是如何通过列表项控制引导转盘

<div  class="sub-menu-list"style="position:absolute">
<ul style="display:inline;">
         <li><a href="#purpose-content">purpose</a></li>
         <li><a href="#chronology-content">chronology</a></li>
         <li><a href="#services-content">services</a></li>
         <li><a href="#contact-content">contact</a></li>
</ul>

我有三个以上的列表项。每个列表项在转盘区域内都有一个内容。我想通过单击列表项来控制这些内容，列表项是这些内容的标题。我认为这可以通过jquery实现，但我找不到任何示例。这是我更清楚的意思

这是我的清单项目

<div  class="sub-menu-list"style="position:absolute">
<ul style="display:inline;">
         <li><a href="#purpose-content">purpose</a></li>
         <li><a href="#chronology-content">chronology</a></li>
         <li><a href="#services-content">services</a></li>
         <li><a href="#contact-content">contact</a></li>
</ul>

这是传送带内容

<div class="carousel-inner">
<div class="item active" id="purpose-content">    
   ... 
</div>

... 

...
...
...

---

单击每个转盘的列表项时如何查看其内容？例如，我在“联系人”页面中单击了“时间顺序”链接，它应该自动向后或向前滑动两次以查看cronology内容

如果你把这个放在你的旋转木马里，它会工作的。只要您有引导css/js文件和jquery。所有这些都将处理不同图像之间的幻灯片动画

<div class="carousel" id="myCarousel">
 <div class="inner-carousel" data-interval="3000" data-ride="carousel">
  <div class="item active">
         <!-- example of what goes in here -->
         <img src="img.jpg">
         <div class="carousel-caption">title</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
</div>

标题

为了完全回答您的问题，当您单击一个“li”时，将发生触发动画到下一个图像的单击事件