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とターゲットの間のリンクは、属性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();
});