Jquery 在单击时切换项目？

我试图在列表项和页面下方的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>

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

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

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

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

我想要的是当您单击项目编号

n

时切换页码

n

但是，使用此代码，单击列表项时不会发生任何事情。我将jQuery链接如下：

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

---

我的问题是为什么这不起作用？我是否错误地使用了

$（）

函数？

我认为在使用onclick显示特定div时，需要隐藏所有其他div 请看一下的标记。

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>

...
...
...

这支笔显示它正在工作：

你确定其他一切都设置好了吗？html中是否包含js文件？

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

您不需要

同级（'.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>



第1面
第二面
第三面
第四面

第1页
第2页
第3页
第4页
使用jQuery的任何原因
1.1.1
？您需要将jQuery包装成$（function（）{…}你的
javascript
代码必须在这个
html
code之后。我已经将javascript代码粘贴到我的脑袋里了，如果不在那里的话？我会说它最好放在一个单独的文件中，但也可以放在工作中。jQuery包含正确吗？
<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>