• ベストアンサー

Jquery タブで、4つのliのうち、ひとつだけ除外

お世話になります。あともう少しのところでうまくいきません! http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ1</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ4つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

jqueryはよく知りませんが… リンク要素に全て同じタブの処理を設定しているのでご質問のようになっているので、(ご提示のソースから識別するなら)classがmenu04の場合だけ何もしないようにすれば良いのでは? (とはいっても、menu04だけ何もしないという構成も変な気がしますが…) 具体的には、タブ処理の最初で  if ($(this).parent().hasClass('menu04')) return; とでもしておくとか。 あるいは、イベントの設定自体をはずしてしまうのなら  $('#topserch ul li a').filter( function() {   return !$(this).parent().hasClass('menu04');  }).click(function() {  ~~~ みたいにするのでもよいかも。

maz1105
質問者

お礼

ありがとうございます! if ($(this).parent().hasClass('menu04')) return; おっしゃるとおり、これをタブ処理の最初に書いたらできました! ばっちりmenu4の時だけタブ処理せずに別のページにいきました。 parent().hasClass('menu04') とっても参考になりました、ありがとうございます!

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

jqueryはつかっていませんが・・・ hrefの値に.match(/^#/)で条件をきりわけてやればいいのでは?

maz1105
質問者

補足

回答ありがとうございます。 例えば、Javascriptで location.href='/test/' なんかでも別のページに飛ばすことはできますが、別のページが読み込まれる前に、一度 <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> のdivが当然消えるので、すごく変な動きになってしまうんです。 (divが消えてから別のページが読まれて) だから、 <li class="menu04">をクリックしたときににも return false; してあげなければいけないのかな~と思ってはいるのですが、どうしたらいいのか分からないんです・・・