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

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>

其想法如下:如果菜单项-后的数字与post-之后的数字匹配，那么就做一些事情。

我该怎么做？

最后的目标是在单击相应的菜单链接时显示每个div。

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

谢谢！

Answer 1

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

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

Answer 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();
});

Answer 3

你可以这样做：

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