javascript - 不是标签时的jQuery过滤器（this.hash）

Question

<ul>
    <li class="active"><a href="#block1">1<a/> </li>
    <li><a href="#block2">2<a/> </li>
     <li>3</li>
<ul>
<div id="block1">
     Block1
</div>
<div id="block2">
     Block2
</div>

 $('ul li:has(a)').on('click', function(e){
    $(this).closest('li').addClass('active').siblings('li').removeClass('active');
            $('*[id^="block"]').hide();
          .filter(this.hash).show(); //WRONG//
            e.preventDefault();
      });

在线样本

我知道这很容易让 jQuery 只click在a标签上.filter(this.hash).show();，

 $('ul li a').on('click', function(){
  $('*[id^="block"]').hide().filter(this.hash).show(); 
}

但我想知道并了解是否有另一种方法可以使它起作用。谢谢！

Answer 1

您的 HTML 不正确，这会导致很多问题：

• 您正在使用<a/>而不是</a>.
• 您正在使用<ul>而不是</ul>.

您正在$('*[id^="tab"]').hide();尝试隐藏元素，但身份是block1，block2而不是tab1和tab2。

您正在closest("a")尝试查找链接，但链接位于列表项内，而不是围绕它。

更正的 HTML：

<ul>
  <li class="active"><a href="#block1">1</a> </li>
  <li><a href="#block2">2</a> </li>
  <li>3</li>
</ul>
<div id="block1">
  Block1
</div>
<div id="block2">
  Block2
</div>

更正的Javascript：

$('*[id^="block"]').hide();
$('*[id^="block"]:first').show();

$('ul li:has(a)').on('click', function (e) {
  $(this).addClass('active').siblings('li').removeClass('active');
  $('*[id^="block"]').hide();
  $($(this).find("a").attr('href')).show();
  e.preventDefault();
});

演示：http: //jsfiddle.net/Y2TaT/2/