如何隐藏除特定块之外的所有内容？ （JavaScript的）

Question

有代码：

<ul class="smenu">
    <li><a href="#" onClick='age("y031");'>0,3 - 1 год</a></li> 
    <li><a href="#" onClick='age("y12");'>1 - 2 года</a></li>   
    <li><a href="#" onClick='age("y23");'>2 - 3 года</a></li>   
    <li><a href="#" onClick='age("y812");'>8 - 12 лет</a></li>  
</ul>

<script type="text/javascript" >
    function age(a) {
        $('.table *[class != a]').hide();
    }
</script>

  <tr class="table">
  <td><span class="y12">test</span></td>
      <td><span class="y23">test</span></td>
      <td><span class="y812">test</span></td>
      <td><span class="y23">test</span></td>
      <td><span class="y031">test</span></td>
  </tr>

此代码隐藏.table中的所有类。单击链接后如何隐藏只是不匹配的类？最好不要重新加载页面。谢谢！

P.S。抱歉我的英文。

Answer 1

我认为你想要这个：

function age(a) {
    $('span').hide(); $('.'+a).show();
}

Demo

Answer 2

试试这个

function age(a) {
        $('.'+a).show().siblings('span').hide();
    }

DEMO

Answer 3

您可以尝试这样的事情

<ul class="smenu">
    <li><a href="#" class="y031">0,3 - 1 год</a></li> 
    <li><a href="#" class="y12">1 - 2 года</a></li>   
    <li><a href="#" class="y23">2 - 3 года</a></li>   
    <li><a href="#" class="y812">8 - 12 лет</a></li>  
</ul>

<table>
  <tr class="table">
      <td><span class="y12">test12</span></td>
      <td><span class="y23">test23 </span></td>
      <td><span class="y812">test812</span></td>
      <td><span class="y23">test23</span></td>
      <td><span class="y031">test031</span></td>
  </tr>
</table>

// Script
$(".smenu li a").click(function()
{
    var showClass = $(this).attr("class");
    $(".table td span").hide();
    $("." + showClass).show();
});

工作小提琴http://jsfiddle.net/anubhavranjan/2WmZV/