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时，我想要切换页码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 看一下jquery tabs()的标记。 li与目标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();
});

在点击时切换项目？

4 个答案: