• 締切済み

jQuery画像タブメニューのダイレクトリンク

はじめまして。 jQueryのリンク設定で困っております。 以下サイトを参考にさせていただき、画像タブメニューを作成しております。 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html 上記のサンプルにて、例えば直接「メニュー2」へのリンクを貼る方法をどなたかご教授いただけませんでしょうか。 短納期の仕事で行き詰まり、困っております。 どうぞよろしくお願い申し上げます。

みんなの回答

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

A No1です。 >どのように追加すればよろしいのでしょうか clickイベントの処理を設定した後ならどこでも良いですが、わかりやすくしておくなら、$(function(){内の一番最後とかホバー設定の前とかに追加しておけばよろしいかと。 >参考にさせていただき、画像タブメニューを作成 どこか変えている部分があれば、それとの関連も合わせて調整してください。

hsrcrj
質問者

お礼

ありがとうございます。 無事設定でき助かりました。

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

>例えば直接「メニュー2」へのリンクを貼る方法 という意味がよくわかりませんが、別ページからリンクした時に最初にtab-02を表示したいといったことでしょうか? もしも、そういう意味ならば、よく行なわれているのはURLのハッシュ部で指定してあげる方法ですが、御提示のスクリプトでもハッシュ部の解析を行なっていますね。 ただ、その結果を使っていないだけのようです。(作者が記述し忘れたのか・・・?) 内容をいじるのは面倒なので、セッティング終了後に指定タブをクリックしてあげるとか… 例えば  if(!urlIdJudgment) handler.filter("[href='" + urlId + "']").click();

hsrcrj
質問者

補足

fujillin様 早急のご解答ありがとうございます。 >別ページからリンクした時に最初にtab-02を表示したい >といったことでしょうか? はい。 おっしゃるとおりです。 説明不足で申し訳ございません。 そしてせっかくご解答いただいているのですが、 if(!urlIdJudgment) handler.filter("[href='" + urlId + "']").click(); この一文をどこに、どのように追加すればよろしいのでしょうか。 何度も申し訳ございません。 どうぞよろしくお願い申し上げます。

関連するQ&A

  • jQueryの画像を使用したタブメニューについて

    jQueryの画像を使用したタブメニューを実装しようと思い、 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html 上記のサイトを参考に行なってみたのですが、各コンテンツの中にdivタグを使用するとその内容が全く表示されないという状況に陥ってしまっており、とても悩んでいます。 一体どうすればdivタグも使用出来るようになるでしょうか。 どなたかお教え頂ければ幸いです。

  • jQuery 画像タブメニューへのダイレクトリンク

    jQueryを使用した画像タブメニューで表示された内容への 他ページからのダイレクトは可能でしょうか? 現在下記ページのノーマル版を使用しています。 http://web.showjin.me/2011/05/jquery_tab_image.html ■デモ画面 http://web.showjin.me/demo/jquery_tab_normal.php ファイル名の後にjquery_tab_normal.php#tab2など、アンカーリンクを張っても無理なようです。 方法がわかるようでしたらご教授お願いします。

  • jQuery タブメニューへのダイレクトリンクの仕方を教えてください。

    jQuery UI タブ http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm を参考にタブメニューを制作しているのですが、 同ページ及び、他ページから各タブメニューへ ダイレクトにリンクすることはできるのでしょうか。 ただ、ここで http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3 とリンク先を指定すると「ソース」というところに ダイレクトにリンクするのですが、 ボタン等で指定するとうまくリンクしません。。。。。 方法があれば教えてください。 よろしくお願いします。

  • javascript タブメニューに直接リンクする

    質問させてください。 ただいま http://blog.creamu.com/mt/2009/12/jquery_24.html こちらのページを参考にサイトを作成しているのですが、 他ページから直接タブメニューのタブ3にリンクをしたいのですが、 出来ません。 http://okwave.jp/qa/q5590389.html こちらのページを参考に違うスクリプトを使おうと思ったのですが、 そうすると既に実装してあるcodasliderが動かなくなってしまうのです・・・・ なので現状のタブ切り替えのスクリプトを使ってタブへのリンクを実現したいのです。 恐れ入りますが、どなたかお知恵を貸していただけませんでしょうか・・・ よろしくお願いします。

  • jQueryの画像を使ったタブメニューについて

    下記のサイトを参考にタブメニューを制作いたしました。 jQueryを使ったタブ(画像)による画面切り替え http://web.showjin.me/2011/05/jquery_tab_image.html 各コンテンツの中にリストタグやpタグなどで内容を記載すると うまくいくのですが、divタグを使用するとまったく表示されないようです。 divタグに style="display: none;"と読み込まれてしまいます。 各コンテンツの内容にjqueryを使用してサムネイルのアルバムを設置したいと 思っているので、divタグなどでも問題なく表示されるようにしたいと思っています。 scriptを修正して実現できる方法が分かる方がおられましたら お教え頂けないでしょうか? どうぞ宜しくお願い致します。

  • タブメニューの画像切り替えについて

    現在以下のサイトのソースでタブのjavascriptで設置しようとしているのですが うまくいかないため、質問させていただきました。 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html ロールオーバーとアクティブの画像を別々にしたいため、 Javascriptのなかの 「// ロールオーバー 」以下の「_o」と書かれている部分を「_act」と 書き換えて「***_act.gif」という画像も用意しました。 ところが、たとえば番目のボタンをクリックすると画像名が 「nav-04_act_o.gif」になってしまい、画像が消えてしまいます。 ロールオーバーとアクティブの画像を別々にしたいとき どのように設定すればいいのかご教授いただけないでしょうか? ちなみにコンテンツの切り替えは使用せずボタンの箇所のみを 使用する予定です。 どうぞよろしくお願いします。

  • 画像を並べるjQuery

    今サンプルで、下記のサイトを参考にしてます。 http://phpspot.org/blog/archives/2011/09/jquery_82.html こちらの、写真に1枚1枚リンクの指定が貼っています。 リンク先がない場合、リンクを外すと崩れてしまいますが、リンク無しでも写真を並べる方法はありませんか? 欲を言えば、リンクありでもなしでも並べられたらいいのですが…。 ご教授頂ければと思います。

  • jqueryで画像を切り替えたい

    以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。  メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。

    • ベストアンサー
    • AJAX
  • ページの上下に同じタブメニューを付けたい

    現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。 ちなみに、 ヘッダーに↓の記述をし、 <script> <!-- jQuery( function() { jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () { var str = jQuery( 'input', this ) . val(); jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' ); jQuery( str ) . css( 'display', 'block' ); jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } ); jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } ); } ) . first() . click(); } ); // --> </script> cssに↓の記述をし、 #jquery-sample-tabs { width:750px; background:#F3F3F3; } #jquery-sample-tabs ul { background:#000; margin: 0; padding: 5px 5px; } #jquery-sample-tabs ul li { display: inline; margin: 1px; padding: 5px 20px; border: solid 1px #888888; border-radius: 5px 5px 0px 0px; background-color: #F3F3F3; cursor: pointer; } #jquery-sample-tabs div { padding: 10px 15px; } HTMLに↓の記述をしています。 <div id="jquery-sample-tabs" class="jquery-sample-tabs"> <ul> <li> <input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" /> タブ(1) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" /> タブ(2) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" /> タブ(3) </li> </ul> <div id="jquery-sample-tab-1-contents">(1)の内容</div> <div id="jquery-sample-tab-1-contents">(2)の内容</div> <div id="jquery-sample-tab-1-contents">(3)の内容</div> </div> よろしくお願いします。

  • JQuery リンク設定方法について

    JQueryのリンク設定方法についてご教授いただけると幸いです。 ■内容 以下のアドレスにあるJQueryですが、リンクをクリックしたときにリンク先へページ移動する設定をご存じの方ご教授いただけると幸いです。 http://www.wizzud.com/jqdock_examples_folder/example.submenus.html 例えばsub-option L1をクリックするとyahooページに移動するという意味です。 単純にhtmlでリンク設定しても駄目でした。 元ページ http://www.wizzud.com/jqdock/examples/ 宜しくお願い致します。