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

しかし、これを機能させる別の方法があるかどうかを知りたいです。ありがとう！

4

1 に答える 1

2

HTML が間違っているため、多くの問題が発生します。

  • <a/>の代わりに使用してい</a>ます。
  • <ul>の代わりに使用してい</ul>ます。

を使用$('*[id^="tab"]').hide();して要素を非表示にしようとしていますが、ID はでblock1あり、およびではblock2ありません。tab1tab2

を使用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/

于 2013-08-02T00:03:50.863 に答える