javascript - 如果 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>

想法如下:如果 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').on('click', 'li', function(e) {
    $('#post-' + this.id.replace('menu-item-', '')).show().siblings().hide();
});

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