0

私は次のHTMLを持っています:

<header>
  <nav>
    <ul>
        <li id="menu-item-1"><a href="javascript:void(0)">Lien 1</a></li>
        <li id="menu-item-2"><a href="javascript:void(0)">Lien 2</a></li>
        <li id="menu-item-3"><a href="javascript:void(0)">Lien 3</a></li>
    </ul>
  </nav>
</header>

<article id="content">
  <div id="post-1" class="page">
    <p>content post 1</p>
  </div>
  <div id="post-2" class="page">
    <p>content post 2</p>
  </div>
  <div id="post-3" class="page">
    <p>content post 3</p>
  </div>
</article>

アイデアは次のとおりです: menu-item-の後の数字がpost-の後の数字と一致する場合、何かを行います。

それ、どうやったら出来るの？

最終的な目標は、対応するメニュー リンクをクリックしたときに各 div を表示することです。

menu-item-1 -> display post-1
menu-item-2 -> display post-2
menu-item-3 -> display post-3

ありがとう ！

4

5 に答える 5

2 
$('nav').on('click', 'li', function(e) {
    $('#post-' + this.id.replace('menu-item-', '')).show().siblings().hide();
});

デモ: http://jsfiddle.net/fKgdL/1

于 2013-01-17T22:57:56.597 に答える
2 
$('nav li').click(function() {
   // Optional: hide other posts 
   $('.page').hide();

   // Show the correct post
   var id = this.id.replace('menu-item-', '');
   $('#post-' + id).show();
});
于 2013-01-17T22:56:37.677 に答える
0 
$('nav li').click(function() {
   var id = this.value.split('-')[1];
   var ele = $('#post-' + id);
   ele.show();
   $('.page').not(ele).hide();   
});
于 2013-01-17T22:59:34.793 に答える
0

次のようなことができます。

$('a').click(function(){
    $id = $(this).closest('li').prop('id'); // Get the id
    $("#post-"+id.split("-")[2]).show();     // show the post
});
于 2013-01-17T22:57:33.853 に答える
0 
$('li').click(function(){

  var pID= $(this).attr('id').split('-')[2];
  $('#content').find('div').each(function(){

    if(pID==$(this).attr('id').split('-')[1]){

      //DO SOMETHING HERE...
    }
  });
});
于 2013-01-17T23:08:45.897 に答える