こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>
をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか?

投稿日時 - 2010-01-07 12:00:30

QNo.5574352

すぐに回答ほしいです

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

jqueryはよく知りませんが…

リンク要素に全て同じタブの処理を設定しているのでご質問のようになっているので、(ご提示のソースから識別するなら)classがmenu04の場合だけ何もしないようにすれば良いのでは?
(とはいっても、menu04だけ何もしないという構成も変な気がしますが…)

具体的には、タブ処理の最初で
 if ($(this).parent().hasClass('menu04')) return;
とでもしておくとか。

あるいは、イベントの設定自体をはずしてしまうのなら
 $('#topserch ul li a').filter( function() {
  return !$(this).parent().hasClass('menu04');
 }).click(function() {  ~~~
みたいにするのでもよいかも。

投稿日時 - 2010-01-07 13:10:07

お礼

ありがとうございます!
if ($(this).parent().hasClass('menu04')) return;
おっしゃるとおり、これをタブ処理の最初に書いたらできました!

ばっちりmenu4の時だけタブ処理せずに別のページにいきました。

parent().hasClass('menu04')
とっても参考になりました、ありがとうございます!

投稿日時 - 2010-01-07 13:41:00

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

jqueryはつかっていませんが・・・

hrefの値に.match(/^#/)で条件をきりわけてやればいいのでは?

投稿日時 - 2010-01-07 12:50:18

補足

回答ありがとうございます。

例えば、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;
してあげなければいけないのかな~と思ってはいるのですが、どうしたらいいのか分からないんです・・・

投稿日時 - 2010-01-07 12:54:59

あなたにオススメの質問