- ベストアンサー
javascriptタブメニューに直接リンクする
- 他ページから直接タブメニューのタブ３にリンクをしたい
- 別のスクリプトを使うと既に実装してあるcodasliderが動かなくなってしまう
- 現状のタブ切り替えのスクリプトを使ってタブへのリンクを実現したい
- osaka58
- お礼率64% (37/57)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 私の環境では(会社なのでIEでしか確認していませんが)動いています。 そのままアクセスするとtestが表示されています。 #tab-3をつけるとtab-3が表示されています。 全て消えるという現象は起きていません。 全て消えるのは$('#tabs div').hide()にて実行されていますが、その後URLに#tab-1がついていない場合は #tabsの中の先頭のdivを表示しています。 なのでその前でエラーが出ていませんか？ 動かないときはまず、エラーが出ていないか確認してください。 試しにjquery.url.jsを読み込まないようにしてみたら全て消えた状態で表示され、エラーが発生したとブラウザが言っています。 おそらくですがjquer.url.jsがきちんと読み込めていないように思います。
その他の回答 (3)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 purl.jpは何でしょうか、すみませんが知りません。 No.1の回答にあるリンク先のリンクからjquery.url.jsがダウンロードできるはずです。 https://github.com/allmarkedup/jQuery-URL-Parser jquery.url.jsを適切な位置(あなたの環境)に配置し、scriptタグで適切に読み込んでください。 読み込めていない場合はJavaScriptのエラーが発生しているかもしれませんのでそのあたりも確認してみてください。 http://blog.creamu.com/mt/2009/12/jquery_24.html のサンプルソースを基にNo.2のスクリプトで実行してみてこちらの環境では動作しています。 ・jquery.url.jsを読み込めているか ・HTMLの構成はサンプルどおりなのか (違っていたらNo.2そのままじゃ動かない可能性があります。セレクタの記述が変わる可能性があるため)
お礼
何度もすみません。 一旦、作成中のものではなく新たにサンプル通りのシンプルなコードでテストしてるのですが、やはりタブの中身が消えてしまいます。 コードは下記になります。 何度も申しわけございませんが、どこがいけないのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.url.js"></script> <script type="text/javascript"> $().ready ( function() { $('#tabs div').hide(); var tabs = $.url().attr('fragment'); if ( tabs !== '' ) { $('#'+tabs).show(); $('a[href="#'+tabs +'"]').parent().addClass('active'); } else { $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); } $('#tabs ul li a').click(function(){ $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tab-1">This is Tab 1</a></li> <li><a href="#tab-2">Tab Two</a></li> <li><a href="#tab-3">Tab Three</a></li> <li><a href="#tab-4">Tab Four</a></li> </ul> <div id="tab-1"> test </div> <div id="tab-2"> test2</div> <div id="tab-3"> test3</div> <div id="tab-4"> test4</div> </div> </body> </html>
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 すみません、割愛しすぎたかもしれません。 >うまくいかない 質問サイトでは抽象的ではなく、 何かエラーが出ている こうやってこうやったときに何も起こらない 等、記入したほうが良いですよ。 以下を上書きしてください。 <script type="text/javascript" src="jquery.url.js"></script> <script type="text/javascript"> $().ready ( function() { $('#tabs div').hide(); var tabs = $.url().attr('fragment'); if ( tabs !== '' ) { $('#'+tabs).show(); $('a[href="#'+tabs +'"]').parent().addClass('active'); } else { $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); } $('#tabs ul li a').click(function(){ $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); }); </script>
お礼
ご丁寧にありがとうございます。 jquery.url.jsはpurl.jpと同じでしょうか？ そちらを読み込んで、上記スクリプトを挿入したら タブメニューの中身がすべて消えてしまいました。 申しわけございません。jquery.url.jsがちゃんと出来てないんでしょうか・・・
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 以下のようにすれば良いと思います。 URLのパースを簡単にするために以下のプラグインを併用しています。 自力でパースするか、これを利用してください。 jquery.url.js http://www.webopixel.net/javascript/416.html 変更点は前半部分(読み込んだ時に実行されるところ) クリックイベントは同じなので割愛します。 動きはプログラム内のコメントで追ってみてください。 外部からのリンクは tabs.html#tab-3という形にするとtab-3が初期表示となります。 ==== JavaScript $('#tabs div').hide(); // xxx.xxx/tabs.html#tab-1 // tab-1の部分をtabsに代入 var tabs = $.url().attr('fragment'); if ( tabs !== '' ) { // tabsが取得できた場合 // ほかの文字列だった場合の考慮は無し // #tab-1であればid=tab-1を表示 $('#'+tabs).show(); // リンクのhrefが#tab-1のものの親要素(parent()、すなわちこの場合は<li>)にactiveクラスを追加する。 $('a[href="#'+tabs +'"]').parent().addClass('active'); } else { $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); }
お礼
早速のご回答ありがとうございます!!! <script type="text/javascript"> $(document).ready(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){ $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); }); </script> 現状head内に書いてある、この部分を差し替えればよいんですよね・・・ 色々と試したのですが、うまく機能せず。。。 大変申し訳ないのですが、どこを書き換えればよいのか教えていただけませんでしょうか？
お礼
何度もありがとうございます。 やはり丸ごと消えてしまうのです・・・ 書き換えた部分だけを元に戻すと 正常に動作します。 私はクロームで見ているのですが、 なぜかIEがまったく立ち上がらなくなってしまい、 IEでは検証ができません・・・ もうちょっと試行錯誤してみます！ 本当にありがとうございます！