![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
お世話になります。あともう少しのところでうまくいきません!
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>
をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか?
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() { ~~~
みたいにするのでもよいかも。
ありがとうございます!
if ($(this).parent().hasClass('menu04')) return;
おっしゃるとおり、これをタブ処理の最初に書いたらできました!
ばっちりmenu4の時だけタブ処理せずに別のページにいきました。
parent().hasClass('menu04')
とっても参考になりました、ありがとうございます!
No.1
- 回答日時:
jqueryはつかっていませんが・・・
hrefの値に.match(/^#/)で条件をきりわけてやればいいのでは?
この回答への補足
回答ありがとうございます。
例えば、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;
してあげなければいけないのかな~と思ってはいるのですが、どうしたらいいのか分からないんです・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
どの<li><a> が押されたか判別...
-
開閉式ツリー型メニューについて
-
.innerHTMLの不一致?
-
PukiWikiの左メニューでonMouse...
-
jQuery タブメニューへのダイ...
-
jQueryについて質問なのですが...
-
カテゴリページ内 複数タブ
-
別フレームからの背景の変更
-
javascriptでEnterキーをtabキ...
-
滑らかに開閉するメニューを作...
-
jQueryスライドメニューの初歩...
-
jquery ドロップダウンメニュー...
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
iframe内のリンクが飛ばないの...
-
Lightbox2でのキャプションにつ...
-
画像ファイルの合成
-
クリックで背景変更するタグ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
どの<li><a> が押されたか判別...
-
【javascript で動的に a タグ...
-
文字と数字が混在する要素のsor...
-
javascriptでEnterキーをtabキ...
-
チェックボックスに入っている...
-
複数のラジオボタン項目でのテ...
-
jquery ドロップダウンメニュー...
-
jQueryのeqで最後からn番目以降...
-
JavaScriptで、?マークとコロ...
-
質問に答えていくと、回答によ...
-
Jqueryでリストのスクロール
-
多階層ドロップダウンのスマホ...
-
JQueryタブのアクティブ アン...
-
gridstack.jsについて教えてく...
-
タブ切り替えの初期表示について
-
オンマウスで画像ロールオーバ...
-
「jQuery」アコーディオンメニ...
-
複数の画像をランダム(シャッ...
おすすめ情報