Ajaxを使った検索サイト作成

2023/08/09 03:22

このQ&Aのポイント

Ajaxを用いてカスタム検索サイトを作成する方法
検索したいキーワードを入力して結果を表示する方法
Ajaxを活用して検索サイトを作成し、結果をタブの中で表示する方法

ベストアンサー

Ajaxを使った検索サイト作成

2009/10/29 23:02

今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> </div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> </div> <div id="footer"> </div> </body> </html>

youthful97
お礼率30% (4/13)

AJAX
回答数3
ありがとう数9

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

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2009/11/02 15:26 回答No.2

「jsonで返してくれる検索サービスを作成しようとしています。」って、あなたがjsonを返すサービスを作ろうとしているんじゃないですよね! もしその方法の質問ならここではなく、PHPとかASPとかCGIのカテゴリーの質問ですね。「jsonで返してくれる検索サービスの結果をAJAXで自分のページに組み込みたい」のですよね！例えばですが、「Yahoo!商品検索サービス」というのがあります。 http://developer.yahoo.co.jp/webapi/shopping/shopping/v1/itemsearch.html これは、キーワードをGETで送って結果をJSONPで返してくれる、Yahoo のサービスです。このサービスを利用するためには事前に「アプリケーションID」をあなたのページで取得しておく必要があります。 http://help.yahoo.co.jp/help/jp/developer/developer-06.html その上で、これを利用するjavascriptプログラムをQueryのAJAX機能を使って、簡便に書く事ができます。（サンプル） <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Expires" content="0" /> <title>Ajax Search Test</title> <script type="text/javascript" charset="utf-8" src="/jslib/jquery.js"></script> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div id="header"></div> <div id="container"> <div id="YahooSarch"> <h3>Ｙａｈｏｏ！商品検索</h3> <div>検索キーワード： <input id="keyword" type="text" width="50"/> <input id="kensaku_button" type="button" value="検索"/> </div> <hr /> <div id="YahooResult">（商品検索結果） </div> </div> </div> <div id="footer"></div> </body> </html>

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2009/11/05 17:39 回答No.3

ついでにもう一つサンプル。「Yahoo!商品検索サービス」だと汎用性が低いので、「GoogleWebサーチ」を使ったサービスをAJAXする例 http://code.google.com/intl/ja/apis/ajaxsearch/ （サンプル） <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Expires" content="0" /> <title>Google Search Test by Ajax</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div><h3>Google Web Sarch by AJAX</h3> <div id="GoogleSarchForm"></div> <div id="SarchForm"> <input type="text" value="" size="40px" /> <input type="button" value="検索" /> <img src="http://www.google.com/uds/css/clear.gif" title="Clear" width=15px height=15px /> <div style="float:right;">powered by<br /> <img src="http://www.google.com/uds/css/small-logo.png"/> </div> </div> <hr style="clear:both;"/> <div id="GoogleResult">（検索結果）<br /> </div> </div> </body> </html> （サンプル：直接Google AJAX Search APIを使った例） <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Expires" content="0" /> <title>Google Search Test</title> <style type="text/css"> #GoogleSarchForm {width :30%;} </style> <script type="text/javascript" src="http://www.google.com/jsapi?key=あなたのGoogle API Key"></script> <script type="text/javascript"> google.load("search", "1"); </script> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ var gWebSearch; $(document).ready(function(){ gWebSearch = new google.search.WebSearch(); gWebSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET); gWebSearch.setRestriction(google.search.Search.RESTRICT_SAFESEARCH, google.search.Search.SAFESEARCH_OFF); gWebSearch.setSearchCompleteCallback(null, function(){ $('#GoogleResult > dl,span').empty(); if(gWebSearch.cursor.pages && gWebSearch.cursor.pages.length > 0){ var nextguide=$(document.createElement("span")); for(var i=0;i<gWebSearch.cursor.pages.length;i++){ var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click", function(event){ event.preventDefault(); gWebSearch.gotoPage($(this).text().substring(0,1)-1); }); nextguide.append(nexta); } nextguide.append($('<a href="'+gWebSearch.cursor.moreResultsUrl+'" target="_blank">もっと検索</a>')); $('#GoogleResult').append(nextguide); } if(gWebSearch.results && gWebSearch.results.length > 0){ var result=$("<dl>"); for(var i=0;i<gWebSearch.results.length;i++){ result.append('<dt><a href="' + gWebSearch.results[i].url + '" target="_blank">' + gWebSearch.results[i].title + '</a></dt>' + '<dd>' + gWebSearch.results[i].content+'</dd>'); } $('#GoogleResult').append(result); $('#GoogleResult > dl').css("margin-left","10px"); $('#GoogleResult > span > a').css({margin:"5px",color:"black",background:"#FFF"}); $('#GoogleResult > span > a:eq('+ gWebSearch.cursor.currentPageIndex + ')').css("background","yellow"); $('#GoogleResult').append(nextguide.clone(true)); }else{ var result=$("<dl>無し</dl>"); $('#GoogleResult').append(result); return; } }); $('#SarchForm > input:eq(1)').bind("click", function(event){ gWebSearch.execute($('#SarchForm > input:eq(0)').val()); }); $('#SarchForm > img:eq(0)').bind("click", function(event){ gWebSearch.clearResults(); $('#SarchForm > input:eq(0)').val(""); $('#GoogleResult > dl,span').empty(); }); }); //]]> </script> </head> <body> <div><h3>Google Web Sarch By Google AJAX Search API</h3> <div id="GoogleSarchForm"></div> <div id="SarchForm"> <input type="text" value="" size="40px" /> <input type="button" value="検索" /> <img src="http://www.google.com/uds/css/clear.gif" title="Clear" width=15px height=15px /> <div style="float:right;">powered by<br /> <img src="http://www.google.com/uds/css/small-logo.png"/> </div> </div> <hr style="clear:both;"/> <div id="GoogleResult">（検索結果）<br /> </div> </div> </body> </html>

質問者

お礼 2009/11/08 23:48

ありがとうございます。試してみたいと思います。

yyr446
ベストアンサー率65% (870/1330)

2009/10/30 18:53 回答No.1

これだけでは、何をAJAXされたいのかさっぱりわかりません。自分のサイト内にある"ajax/google.html"とかの内容を <div id="container">の中に動的に取り込みたいんですよね？＜検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示したい＞とありますが、ここが不可解な部分です。　検索先毎に"ajax/google.html"とかが作ってあってその中にテキストボックスと、検索先用のフォームがあるんですか。それを、親ページからAJAXで選んで読み込み、フォームをサブミットするという理解でよいのでしょうか？　まさかとは思いますが、直接AJAXで検索結果を取り込もうとなさっているのでは無いですよね！それは無理ですよ。もっとも検索結果をjsonで返してくれる検索サービスならJSONPで実現出来ますけど.... あるいは、RSSとかKMLとかならGoogleにAPIがありますよ。

質問者

補足 2009/10/30 22:58

説明不足でした。 jsonで返してくれる検索サービスを作成しようとしています。実現させるにはどうしたらいいでしょうか？よろしくお願いします。

関連するQ&A

検索サイト作成について
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> </div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> </div> <div id="footer"> </div> </body> </html>
- ベストアンサー
- JavaScript
Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
liタグで先頭のみボーダーを消す方法
liタグで先頭のみボーダーを消そうと下記のソースを記述してInternet Explorer6で閲覧した所、一瞬liタグの先頭でボーダーが見えてしまう事がありました。その為、これを抑止したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、下記が今の所考えている条件となります。 1. http://www.kyosuke.jp/yugajs/のyuga.js 0.7.1を使用し、最初の要素にclass="firstChild"、最後の要素にclass="lastChild"を付加しておりますが、なるべくならこの仕組みは使用し続けたいと思います。 2. liの数はCMS上で動的に変化させても問題ないようにしたいと思います。 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text/javascript" src="js/yuga.js" charset="utf-8"></script> <title>title</title> <style type="text/css">  </style> </head> <body> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> <div><img src="Sunset.jpg" alt="" width="800" height="600" /></div> <div><img src="Winter.jpg" alt="" width="800" height="600" /></div> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- HTML
垂直型のドロップダウンメニューの作成方法について
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
スクリプトエラーについて
メールフォームをmailformpro2というフリーのものをつかって、自分なりにホームページビルダーでカスタマイズしているのですが、最終的にプレビューしてみるとスクリプトエラーが出てしまいます。エラーはこのようなものです。ライン　２文字　１エラー　文字が正しくありません。コード　０２行目の一文字目ということだと思うのですが、何が原因かわかりません。それともうひとつ、「お問い合わせ」というタイトルにしているのですが、これも原因がわからないのですが、プレビューをしてみると問い合わせの後に入力していない文字が出て「問い合わせ３．０．０」が表示されます。これもスクリプトエラーが原因なのでしょうか？以下が、その部分を含んでいると思われるＨＴＭＬです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>お問い合わせ</title> <meta name="revisit_after" content="7 days" /> <meta name="robots" content="ALL" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="index" href="index.html" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="commons/_include_wide.css" type="text/css" /> <meta name="Description" content="お問い合わせ" />  <link rel="stylesheet" href="commons/mailform.css" type="text/css" /> <script type="text/javascript" src="commons/jquery.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script>  </head> <body> <div id="wrapper"> <div id="header"> <h1 id="title">お問い合わせ <script type="text/javascript" src="commons/mfp.version.js"></script></h1> 　　　　　　　　　　　　<div>お電話でのお問い合せは ***-***-**** (月曜日～金曜日／午前9時～午後6時)までお問い合わせください。</div> </div>
- 締切済み
- ホームページ作成ソフト
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を勉強し始めました。（JavaScriptの初歩は勉強しました。） jQueryを記述したものを『script.js』という外部ファイルで保存し、htmlファイルにリンクし参照させています。ブラウザでテストしてみたところ、きちんと動作します。ただ、『script.js』ファイルを開こうとクリックするとWindows Script Hostのエラーウィンドウ「エラー:文字が正しくありません」と表示されてしまいます。文字コードや全角スペースが混ざっていないか等、色々と試しましたが相変わらずエラーで困っています。外部ファイルに記述、というのが理解不足の初心者には難しいのかとも思うのですが…。 htmlファイルのソースは以下の通りです。 <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample1</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="script.js" charset="UTF-8"> </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> </body> </html> また、問題の『script.js』ファイルは以下のように記述しています。 $(function(){ $("li").css("color","red"); });
- ベストアンサー
- 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多層式アコーディオンメニューについて。
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
タブに地図を入れたら、中心がずれました。
タブに地図を入れたら、中心がずれました。タブはないとき、ずれないです。あれこれ試しましたが、どうも修正できませんでした。教えてください。お願いします。下はソースです。 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="http://5am.jp/common/js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="http://5am.jp/common/js/ui.core.js" type="text/javascript"></script> <script src="http://5am.jp/common/js/ui.tabs.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="http://5am.jp/common/css/ui.tabs.css"> <script type="text/javascript"> $(function() {$('#container-1 > ul').tabs();}); </script> </head> <body> <div id="container-1"> <ul> <li><a href="#fragment-1"><span>タブ1</span></a></li> <li><a href="#fragment-2"><span>タブ2</span></a></li> <li><a href="#fragment-3"><span>タブ3</span></a></li> </ul> <div class="Clear"> <div id="fragment-1"> <p>タブ1の内容</p> </div> <div id="fragment-2"> <p>タブ2の内容</p> </div> <div id="fragment-3"> <table width="705" border="0" cellpadding="0" cellspacing="0"> <tr><td class="button-area"><div align="center"> </div></td> </tr> <tr><td> </td> </tr> </table> <div id="map_canvas" style="width: 705px; height:375px"></div> <script src="http://maps.google.co.jp/maps?file=api&v=1&key=ABQIAAAAQzfW6rb5jraVXMAQHx8W2hRz0pttuSXoxOtnDzBeMrT8H_GbDhS6TtNcJU1K_O_fBt6-ziKGKvN9gg" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map_canvas")); var point = new GLatLng(35.778976, 139.725286) map.setCenter(point, 15); var marker = new GMarker(point); map.addOverlay(marker); map.addControl(new GLargeMapControl()); marker.openInfoWindowHtml('東京都北区赤羽2-5-7 '); } </script> </div></div></div></body></html>
- 締切済み
- JavaScript