Question

我有以下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

谢谢！

Answer 1

$('nav li').click(function() {
   // Optional: hide other posts 
   $('.page').hide();

   // Show the correct post
   var id = this.id.replace('menu-item-', '');
   $('#post-' + id).show();
});

Answer 2

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

演示：http://jsfiddle.net/fKgdL/1

Answer 3

您可以这样做：

$('a').click(function(){
    $id = $(this).closest('li').prop('id'); // Get the id
    $("#post-"+id.split("-")[2]).show();     // show the post
});

Answer 4

$('nav li').click(function() {
   var id = this.value.split('-')[1];
   var ele = $('#post-' + id);
   ele.show();
   $('.page').not(ele).hide();   
});

Answer 5

$('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...
    }
  });
});

如果ID部分匹配，请选择一个元素

5 个答案: