締切済み

jQueryプラグインのメガドロップダウンメニュー

2013/09/24 22:48

jQueryプラグインのメガドロップダウンメニューについて当方プログラミング初心者です。至らない点ばかりですが、どうかご容赦ください。。。この度、仕事でこのメガドロップダウンメニューを使用することになりました。サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル（オンマウスすると車の写真などが出てくる）スタイルは(2)にある、白色のバーなのですが、どうもうまくいきません・・・上記サイトからダウンロードしたもの・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですがバーの色は黒いままだし、まずドロップダウンしません。今、この状態のまま詰まってしまっています・・・たぶんめちゃくちゃになってしまっていると思うのですが、どこが悪いのかわかりません・・・＞＜ ★ＨＴＭＬ（ヘッド） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ～～～ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★ＨＴＭＬ（ボディ） <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ～～～～～～～～省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★ＣＳＳ(1)（dcmegamenu.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★ＣＳＳ(2)（white.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・どこが悪いのでしょうか・・・？私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、どうか、お力添えをお願いできれば、、、、お願いします。

evenyan0713
お礼率0% (0/1)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

noname#209234

2013/09/25 00:02 回答No.1

色々とありますが・・・まず、ロード時の設定が動いてないかと・・・ jQueryでID指定の場合 $("#ID")です。ですから $("#mega-menu").dcMegaMenu({ となります。 FireFox使ってるならFireBug入れてデバッグ作業しながら進めてください、IEならF12押すと開発者ツールっていってデバッガー出ます。あと、クロームもデバッガーついてますからそこでエラー文見ながら一つづつ潰してください・・・あと、DLした際についてきた[index.html]ってあると思いますが、あれ見ながら再度勉強しながらやりましょう・・・

関連するQ&A

jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
垂直型のドロップダウンメニューの作成方法について
http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行！」で試す事が出来ます。また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。【ソース】 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第１ ≫</a> <ul> <li><a href="#">第２－１ ≫</a> <ul> <li><a href="#" target="_blank">第２－１－１</a></li> <li><a href="#" target="_blank">第２－１－２</a></li> <li><a href="#" target="_blank">第２－１－３</a></li> <li><a href="#" target="_blank">第２－１－４</a></li> </ul> </li> <li><a href="#">第２－２ ≫</a> <ul> <li><a href="#" target="_blank">第２－２－１</a></li> <li><a href="#" target="_blank">第２－２－２</a></li> <li><a href="#" target="_blank">第２－２－３</a></li> <li><a href="#" target="_blank">第２－２－４</a></li> </ul> </li> <li><a href="#">第２－３ ≫</a> <ul> <li><a href="#" target="_blank">第２－３－１</a></li> <li><a href="#" target="_blank">第２－３－２</a></li> <li><a href="#" target="_blank">第２－３－３</a></li> <li><a href="#" target="_blank">第２－３－４</a></li> </ul> </li> <li><a href="#">第２－４ ≫</a> <ul> <li><a href="#" target="_blank">第２－４－１</a></li> <li><a href="#" target="_blank">第２－４－２</a></li> <li><a href="#" target="_blank">第２－４－３</a></li> <li><a href="#" target="_blank">第２－４－４</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、第一階層(上記ソースの「第１」)をマウスオーバーした際、すべての内容が表示されませんでした。その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。【第二階層(第三階層)の現在のイメージ】第２－１第２－２第２－３第２－４【第二階層(第三階層)のやりたいイメージ】第２－１　第２－２第２－３　第２－４以上、よろしくお願いします。
- ベストアンサー
- JavaScript
jQueryについて
jQueryのクロスフェードとlightboxを同一ページに設定しています。よく分かっていないのに、コピペで作っていますが、クロスフェードをするとlightboxが動作しません。設定をどう変更したら出来るようになりますか？どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"> <div id="container"> <div id="header"> <h1>いろはにほへと</h1> </div> <div id="menu"> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>
- 締切済み
- JavaScript
jQueryでの開閉メニューについて
jQueryでアコーディオン（開閉）メニューを作成しています。メニューの右端に、マークを表示していますが、開閉状態に応じて変えることはできますでしょうか？単に変えるだけならできますが、開閉状態に応じて変えるとなると、なかなかできませんでした。画像のように閉じているときは右端に[+]マークを表示し、開いたときは[-]マークを表示したいのです。皆様の知恵をご教示いただけると幸いです。以下ソースです。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="../js/jquery/jquery.js"></script> <script> </script> <style type="text/css"> .leftmenu { float: left; width: 200px; background: #ff0000; list-style: none; } .leftmenu h4 { padding: 0; /* margin: 0;*/ margin: 5px 2px 5px 5px; } .leftmenu ul { padding: 0; margin: 0; list-style-type: none; } .leftmenu li { padding: 0; margin: 0; } .leftmenu a, .leftmenu a:visited { #text-transform:uppercase; display: block; height: 25px; line-height: 25px; padding: 0 10px 0 20px; color: #ffffff; background: #303030; text-decoration: none; } .leftmenu a:hover { color: #000; background-color: #acac23; } .leftmenu span{ float:right; } </style> <title>sample</title> </head> <body> <div class="wrapper"> <div class="leftmenu"> <h4 class="conmenu">Menu-1</h4> <ul class="sub"> <li><a href="#">Menu-1a</a></li> <li><a href="#">Menu-1b</a></li> <li><a href="#">Menu-1c</a></li> <li><a href="#">Menu-1d</a></li> </ul> <h4 class="conmenu">Menu-2</h4> <ul class="sub"> <li><a href="#">Menu-2a</a></li> <li><a href="#">Menu-2b</a></li> <li><a href="#">Menu-2c</a></li> <li><a href="#">Menu-2d</a></li> <li><a href="#">Menu-2e</a></li> </ul> <h4 class="conmenu">Menu-3</h4> <ul class="sub"> <li><a href="#">Menu-3a</a></li> <li><a href="#">Menu-3b</a></li> <li><a href="#">Menu-3c</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
jQueryアコーディオンで複数メニューを開きたい
jQueryで開閉式（アコーディオン）の縦メニューを作りました。 http://www1.m.jcnnet.jp/minato01/demo/j-menu/ このメニューで、以下の２点の仕様を追加希望です。１.　「メニュー１」「メニュー２」を最初から開いた状態で表示したい２.できれば、ページ移動した場合、前の開いた内容を記憶させたい（cookieでOK）特に「１」は必須事項です。色々検索してみましたが、方法が色々あってもすべて満たす方法が見つかりません。ソースは以下の通りです。 -------------------- html -------------------- <span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul> <span>メニュー 4</span> <ul> <li><a href="#">メニュー 4-1</a></li> <li><a href="#">メニュー 4-2</a></li> <li><a href="#">メニュー 4-3</a></li> </ul> -------------------- css -------------------- ul, li { text-indent: 0; list-style: none; } ul { display: none; } ul.selected { display: block; } span { margin-bottom:1px; padding: 8px 4px; display: block; cursor: pointer; border:1px solid #ccc; } span:before { padding: 0 8px 0 0; vertical-align: middle; content: url("img/bullet_arrow_right.png"); } span.selected:before { content: url("img/bullet_arrow_down.png"); } span:hover,li:hover { background: #f3f3f3; } -------------------- js -------------------- $(function() { $('<img>').attr('src', 'img/bullet_arrow_down.png'); $('span').click(function() { $(this).next('ul').slideToggle('fast'); $(this).toggleClass('selected'); }); }); ※jQueryは「jquery-1.9.0.min.js」を読み込んでいます。 -------------------- 参考サイトは以下のサイトです。 http://php.o0o0.jp/article/4138817358715040 分かる方、ぜひ具体的にどこをどう修正したらよいか詳しく教えていただければ幸いです。どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
jQueryスライドメニューの初歩的な質問です
以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます（htmlファイルにコピーすれば動作すると思います）。ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか？また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。どうぞよろしくお願いいたします。  <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('jquery', '1.7.1')</script> <script type='text/javascript'>  </script>  <style type="text/css"> span.tree_a{ width: 100%; display: block; } </style>  <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> 
- ベストアンサー
- JavaScript
jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
jqueryの tabを使用して外部リンクをしたい
jqueryの tabを使用して外部リンクをしたいこのサイトの下の方のマウスオーバーで切り替えを使用しているのですがタブをマウスオーバーで切り替えつつ、タブ部分をクリックしたら外部にリンクさせるようするにはどうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。初心者で大変申し訳ありませんが、ご教授ください。とても困っています。よろしくお願いいたします。 ************************************************************* <!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> <head>  <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript">  </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> </div> </div> </body> </html>
- 締切済み
- JavaScript
jQueryのslideToggleについて
jQueryのslideToggleについて質問です。クリックするとドロップダウンメニューが表示されるとこまではOKです。「メニュー1」のサブメニューが開いている状態で「メニュー2」をクリックすると・既に開いている「メニュー1」のサブメニューが閉じる・クリックされた「メニュー2」のサブメニューが開くとしたいのですがどうすればいいのでしょうか？ ■html <nav id="global-nav"> <ul> <li><a href="#">ホーム</a></li> <li> <a class="sub" href="#">メニュー1</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li> <a class="sub" href="#">メニュー2</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">メニュー3</a></li> </ul> </nav> ■js $('a.sub').click(function(){ $('#global-nav li ul').hide();//←既に開いている場合は他を閉じる $(this).next('ul').slideToggle('slow'); return false; }); jsの2行目を入れることで他のサブメニューが開いている場合の問題はクリアできたのですが「メニュー1」をクリックするたびにサブメニューが開くだけで閉じることがありません^^;
- ベストアンサー
- JavaScript
jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。ソースは <!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=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript

jQueryプラグインのメガドロップダウンメニュー

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

jQueryプラグインのメガドロップダウンメニュー

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録