jquery - 单击时切换项目？

Question

我正在尝试在页面下方的列表项和 div 之间建立链接。

我的 HTML 如下所示：

<div id="sidebar">
  <ul id="side-items">
    <li class="side-item" id="s1">side 1</li>
    <li class="side-item" id="s2">side 2</li>
    <li class="side-item" id="s3">side 3</li>
    <li class="side-item" id="s4">side 4</li>
  </ul>
</div>
<div id="body">
  <div id="page1">
    Page1
  </div>
  <div id="page2">
    Page2
  </div>
  <div id="page3">
    Page3
  </div>
  <div id="page4">
    Page4
  </div>
</div>

我的 jQuery 看起来像这样：

$("#s1").click(function() {
    $("#page1").toggle();
});

$("#s2").click(function() {
    $("#page2").toggle();
});

$("#s3").click(function() {
    $("#page3").toggle();
});

$("#s4").click(function() {
    $("#page4").toggle();
});

我想要的是n当您单击 item number 时要切换的页码n。

但是，使用此代码，当您单击列表项时不会发生任何事情。我有这样的jQuery链接：

<script src="./jquery-1.10.1.min.js" type="text/javascript"></script>

我的问题是为什么这不起作用？我是否$()错误地使用了该功能？

Answer 1

LIVE DEMO

$("#sidebar li").click(function() {
    $('.page').eq( $(this).index() ).show().siblings('.page').hide();
});

_{.siblings('.page').hide();如果您不想处理其他页面的可见性，则不需要}

简化的 HTML：

<div id="sidebar">
  <ul>
    <li>side 1</li>
    <li>side 2</li>
    <li>side 3</li>
    <li>side 4</li>
  </ul>
</div>

<div id="body">
  <div class="page">
    Page1
  </div>
  <div class="page">
    Page2
  </div>
  <div class="page">
    Page3
  </div>
  <div class="page">
    Page4
  </div>
</div>

Answer 2

我认为您需要在使用 onclick 显示特定 div 时隐藏所有其他 div 看看jquery tabs()的标记。li和 target之间的链接div是通过href属性完成的：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a></li>
        <li><a href="#tabs-2">tab1</a></li>
        <li><a href="#tabs-3">tab1</a></li>
    </ul>
    <div id="tabs-1">
        ...
    </div>
    <div id="tabs-2">
        ...
    </div>
    <div id="tabs-3">
        ...
    </div>
</div>

Answer 3

这支笔表明它正在工作：http ://codepen.io/anon/pen/IystC

您确定其他所有设置都正确吗？js文件甚至包含在html中吗？

Answer 4

$('#side-items li').click(function() {
    var index = $('#side-items li').index(this);
    $("#page" + (index+1)).toggle();
});