- ベストアンサー
jqueryで複数のIDをまとめたいとき。
今サイトを作成しています。 jqueryを使用していますがjsは弱いです。 http://www.tora-corp.com/co/miku2/test/slide.html こちらのテストサイトですが、 マウスをメニュー上で移動した際に追尾するプログラムと ABOUTのところをクリックしたときにドロップダウンする プログラムとがidの箇所が重なるため、どのように表記すれば 良いか分からず大変困っております。 プロの方のご指導を是非頂きたく存じます。 どうぞよろしくお願いいたします。
- ststst
- お礼率50% (20/40)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
きちんと作成されているプラグインであれば、同じ要素をトリガーにしても、処理内容が異なっていれば問題なく設置できるはずです。 処理内容が同じ要素に対して影響を与えるような場合は、その処理同士が干渉する可能性もありますが、ご提示のものの場合処理の対象要素が異なっていますので、その点では問題はないと想像します。（確認はしていません） ただし、ご提示のまま設置した場合、プルダウンのサブメニューとマジックラインの位置が重なってしまうため、表示上マジックラインが隠れてしまう可能性があります。 あるいは、マジックラインを重なり順で上に置いた場合は、そこをマウスが通過する際にマウスアウトのイベントが発生することが予想されます。（サブメニューが閉じてしまう） マジックラインの位置をメインメニューの上側に設置したり、メインメニューの裏側におくなどの工夫をすればよいだろうと思いますが、単に設置した場合にどのようになるかはわかりません。 一方で、それほど複雑な処理でもなさそうですので、ご自分で自作するという方法もあります。 （必要な機能だけに絞って実現するのなら、それほど複雑なスクリプトにはなりません。ライブラリ化しようとすると、少し複雑になるかも） ごく単純化した例をご参考までに。 * メニュー部は画像ではなくテキストにしてあります。 * インデント部分の全角空白は半角などに <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ background-color:#000; } div.line{ height:2px; overflow:hidden; background-color:#fff; color:red;} #nav, #nav ul, #nav li{ list-style-type:none; margin:0; padding:0; } #nav{ font-size:20px; font-weight:bold; color:#fff; height:45px; width:840px; margin:0 auto; } #nav a{ text-decoration:none; } #nav a:link, #nav a:visited{ color:#fff; } #nav li.main{ position:relative; float:left; } #nav li.main a{ display:block; padding:12px 20px; } #nav ul{ position:absolute; left:0; top:44px; background-color:#555; } #nav ul li{ border-top:1px solid #fff; } #nav ul li a{ width:150px; padding:16px 20px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div class="line"> </div> <ul id="nav"> <li><a href="#">About</a> <ul> <li><a href="#">Concept</a></li> <li><a href="#">Aburi brand</a></li> <li><a href="#">Philosophy</a></li> <li><a href="#">Sustainability</a></li> </ul> </li> <li><a href="#">Menu</a> <ul> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-2</a></li> <li><a href="#">Menu-3</a></li> </ul> </li><li><a href="#">Beverrages</a> <ul> <li><a href="#">Beverrages-1</a></li> <li><a href="#">Beverrages-2</a></li> <li><a href="#">Beverrages-3</a></li> </ul> </li> </li><li><a href="#">Private Dining</a></li> </li><li><a href="#">Event</a></li> </li><li><a href="#">Book now</a></li> </li><li><a href="#">Contact</a></li> </ul> <div style="background-color:#666; height:400px; clear:both;">記事部分</div> <script type="text/javascript"> (function(){ // 初期セットアップ $("#nav>li").addClass("main").find("ul").css({opacity: 0.7, display: "none"}) .find("li:first-child").css("border", 0); var line = $("<div></div>"); line.appendTo(line.clone().css({position:"relative", top:-4, zIndex:-10})) .parent().insertAfter($("#nav")); line.css({height:2, position:"absolute", backgroundColor:"#f00", overflow:"hidden"}); // メニューのホバーアクション $("#nav>li").hover(function(){ var t = $(this); $("ul", t).slideDown(); line.css("width", t.width()).stop(1, 1).animate({left: t.offset().left}); }, function(){ $("ul", this).stop(1, 1).slideUp(); }); // サブメニューのホバーアクション $("#nav ul li a").hover(function(){ $(this).css("backgroundColor", "#888"); }, function(){ $(this).css("backgroundColor", "#555"); }); })(); </script> </body> </html>
その他の回答 (1)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
＞ABOUTのところをクリックしたときにドロップダウンする ＞プログラムとがidの箇所が重なるため、どのように表記すれば ＞良いか分からず大変困っております。 ごめん、見てみたけど言ってることが良くわからなかった。 ＡＢＯＵＴのところはクリックしなくてもメニューが出てくるみたいだし、 idの箇所が重なるという表現も良くわからない。 あなたがどのような意図でサイトを作成しているかわからないから ・こうしたいんだけど、こうなってしまう と説明が欲しい。
関連するQ&A
- jqueryのプラグインdroppy.jsについて
WEBデザイン初心者です。 グローバルナビ部分を、ドロップダウンリストにしたいなと思い、jqueryで実装しようと思っています。 調べてみたところ、よく使われているプラグインにdroppy.jsというものがありましたが、 どの紹介サイトでもjQueryのサイトにリンクされています。 ただ、そこから、ダウンロードファイルが見つかりません。 もしかして、jQueryサイトでは取り扱わなくなったプラグインなのでしょうか。 あまりにもdroppyの事例が多いので、できれば導入したいのですが、分かる方いれば、よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryのバージョンが違うものを複数設置してもよいのでしょうか？
最近jQueryに興味を持ち、サイトで公開されているプラグインを試しています。複数のスクリプトを実行させるとエラーが起こるため原因を探っているのですが、jQueryを使ったサイトを研究していてふと疑問に思ったことがあります。 とても初歩的な質問だと思うのですが、jQueryにはいろいろなバージョンがあるのでしょうか？jQuery 1.2.3や1.3.2などいくつか見たことがあります。それは単純に開発の段階で新しくバージョンアップされただけなのでしょうか？それとも全く別物なのでしょうか？ それらの違うバージョンのjQuaryは共存することはできるのでしょうか？ サーバーにいくつもアップロードして、ひとつのページで <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-1.2.3.min.js"></script> などと、しても良いかという意味です。 また、共存できない場合、違うバージョンのjQuaryをダウンロードするように指示されている場合でも（プラグインの紹介サイト過去記事で表記が古い場合）、最新バージョンのｊQuaryをアップロードしておけば正常に動くものなのでしょうか？ よろしくおねがいします。
- ベストアンサー
- JavaScript
- 複数のjQueryを導入するには…？
見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。
- 締切済み
- JavaScript
- jqueryのプラグインについて
現在、webサイトにjquery.lazyload.jsを導入しようとしていますが、 firefoxでブラウザサイズが小さいと、左右にガタガタ動いて、ブラウザが 止まってしまいます。 どなたかjquery.lazyload.jsについて解決方法を教えてください。 宜しくお願いいたします。 参考url http://www.skuare.net/test/jLazyLoad.html
- 締切済み
- AJAX
- jQueryについて教えてください
jQueryというJSがあるのは誰もがご存知だと思います。 私も名前や少しだけ使ったことがありますが、いまいち漠然として分かりません。 初歩的な質問で申し訳ないのですが、 極論から言うとjQueryでいったいどの位の表現？機能を使うことができるのですか？ 本も買ってみたり、ネットでも調べると何かしらjQueryを使ったプログラムはありますが、それが全てではないと思いますし、むしろ極一部だと思います。 jQueryを使うと、どんな事を、どうやったら、何ができる？ って事がどうして皆さん分かるのでしょうか？ 例えば何かイメージしてる動きがあって、それはネットで調べれば近い情報は出てくると思います。 しかし、jQueryである必要も無ければ、jQueryの方が楽な場合もあると思います。 だけどjQueryだとなぜ楽に作れるのか、それが理解できなくて困っています。 JavaScriptの知識はかじる程度しかないですが、 jQueryを理解するにはjQueryのソースを理解しないと、何ができるかは判断できないのでしょうか？ また、「jQueryでできることの一覧」みたいなサイトってありますか？ あと、jQueryで使えるライブラリの意味がいまいち分かりませんが、 これはjQueryを理解してる人が、使いやすいように作った別のJSファイルって認識で良いのでしょうか？ どうも根本的な事を理解しきれてなくて、教えていただきたく。
- ベストアンサー
- JavaScript
- jqueryのバージョン違いの解決方法は？
どうしてもわからないので、ご教授お願いいたします。 http://baby.caregoods.org/のサイトでjquery.treeview.js（http://bassistance.de/jquery-plugins/jquery-plugin-treeview/）のツリーメニューを使っています。 同梱されていたjquery1.4.3を使っていました。 ところが、このサイトの管理画面で画像のドラッグ＆ドロップで入れ替えるという機能が使えなくなり、元のjquery1.6.2に戻したところjquery.treeview.jsのメニューが使えなくなってしまいました。(いろいろなpluginが入っているようです。) 複数のjqueryが使えないのはここで調べてわかったのですが、http://stacktrace.jp/jquery/with_other_lib.htmlのサイトを参考にして ----------------- // $ 関数および jQuery関数の上書きを元に戻します。 var $j = jQuery.noConflict(true); // $ は jQuery ver1.4.3を参照します。 alert($.fn.jquery); // => 1.4.3 // jQuery は jQuery ver1.4.3を参照します。 alert(jQuery.fn.jquery); // => 1.4.3 // $j は jQuery ver1.6.2を参照します。 alert($j.fn.jquery); // => 1.6.2 ---------------------------- と書いたjsファイルを読み込むのですが、1.6.2しか反映されず、1.4.3で使っているjquery.treeview.jsが使えません。 このjsファイルの前に、jquery-1.4.3.jsとjquery-1.6.2.jsは呼び出してあります。 firefoxで閲覧すると「1.6.2」「1.6.2 このページによる追加のダイアログ表示を抑止する」「1.4.3 このページによる追加のダイアログ表示を抑止する」と書いたポップアップが３度ほど出るようになりました。 こういう状況なのですがどうにか一緒に使える方法はないでしょうか？ javascriptは初心者なので説明があまり上手くないので申し訳ありません。 うまく伝わるかわかりませんが、よろしくお願いいたします。
- 締切済み
- JavaScript
- jQuery faux-3D Viewportコンテンツ内でもスライド
jQuery faux-3D Viewportコンテンツ内でもスライドさせたい jQuery faux-3D Viewport http://www.skuare.net/test/jfaux3D.html のカスタマイズで質問です。 1～9ボタンの操作に加え、 <div class="slide-wrap"></div> の中にリンクを張ってページスライドさせたいのですが、 JSの記述方法が分かりません。 そもそも実現できるのかどうかもわからないのですが、 ご教授いただけないでしょうか？
- ベストアンサー
- JavaScript
- WordPressでjQuery-UIの使い方
WordPressでjQuery-UIの使い方を教えてください。 現在、WordPressで作ったサイトにフローティングメニューを取り入れたいと思っています。 フローティングメニューを入れるにあたり、jQuery-UIを読み込まなければならないのですが ちゃんと読み込まれていないようです。 WordPressではなくテストでサイトを作り、読み込ませるとちゃんと動作するので、 WordPress特有の問題かと思います。 WordPressでjQuery-UIを読み込ませる方法を教えてください。 下記に参考にしたサイトと、ソースを記述しました。 -------WordPressのヘッダ内の記述と参考にしたサイト------- <?php wp_deregister_script('jquery.ui.core.min'); wp_enqueue_script('jquery.ui.core', get_bloginfo('template_url') . '/js/jquery.ui.core.js'); ?> wp_deregister_scriptでWordPressのjquery.uiを見に行かないようにして、 wp_enqueue_scriptでダウンロードしてきたＵＩを見に行くようにしてあります。 参考にしたサイト（jQuery-UI） http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html
- ベストアンサー
- PHP
- Jqueryの干渉について
Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- jqueryで未定のファイル名を取得する
サイトでjquery.1.4.2を使っています。 javascriptないしjqueryで、/img/test01.jpg～test05.jpg、tesuto.jpgがあり、個数が6個ある（または～～というファイルがある）とアラートを返したいのですが、方法が良く分かりません。 jqueryでloadを使う事も考えましたがファイル名が一定ではないのと個数が毎回変わるため指定ができない状況です。 /index.html /js/jquery.js /img/ファイル なお特定のプラグインを使用する場合、jquery側のバージョン変更は可能です。 よろしくご教授ください。
- ベストアンサー
- JavaScript
補足
文章足らずで申し訳ありません。 現在、２種類のメニューがある状態になっております。 (1)ホーム～マジックショップ └マウスにバーが追随する動き (2)ABOUT～CONTACT └ABOUTへのマウスオーバーでドロップダウンする動き これらは異なるjavascriptになるのですが 私の出口としては、(2)のメニューに(1)のマウスが追随する動きを 追加したいと考えております。 しかし、いずれのプログラムも ソースを見ていくと、ul、liにかかるように 思われるため、両方のプログラムを(2)のメニューに反映するには どうすればいいのか頓挫しているところでございます。 何卒よろしくお願いいたします。