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

How to hide everything except particular block? (JavaScript)

本文关键字：JavaScript 隐藏 何隐藏      更新时间：2023-09-26

有代码：

<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中的所有类。单击链接后如何隐藏不匹配的类？最好不要重新加载页面。谢谢

附言：对不起我的英语。

我想你想要这个：

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

演示

试试这个

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

演示

您可以尝试类似的

<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/

相关文章：