根据列表项单击更改DIV内容

Question

我在网页中有一个cateogries列表，我想根据点击的项目更改页面中div的内容。我看过下拉菜单的示例，但没有列表项的示例。我们假设我有这个清单：

<ul class="nav-sidebar">
  <li><a  href="#">elem1</a></li>
  <li> <a  href="#">elem2</a></li>
  <li> <a  href="#">elem3</a></li>
</ul>

<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

例如，当用户点击elem1时，带有div1的div将以滑动方式显示？

这是我发现的例子：http://jsfiddle.net/cqDES/1540/

Answer 1

要使用相同的行为，但更改为列表，您可以执行以下操作：

$(function() {
    $('.nav-sidebar li').click(function() {
      var index = $(this).index() + 1;
      $('div:not(#div' + index + ')').slideUp();
      $('#div' + index).slideDown();
    });
});

小提琴：http://jsfiddle.net/cqDES/1552/