- ベストアンサー
jqueryのタブ切り替えについて
tracerの回答
おっしゃっていることを私がやるとするならば、店舗数が多いのであれば、MySQLなどのデータベースに店舗情報を格納して、PHPで取り出します。そしてその結果をJavaScriptを使用してタブ形式のコンテンツに仕上げます。 質問者さんの場合、技術的なことよりも先に、まずJavaScriptでできること、PHPでできることを概念的に吸収されることをおすすめします。 また、PHPやJavaScirptを扱うには、HTML&CSSを理解していることが前提となります。 例のコンテンツに対して質問者さんがどこまでコスト(時間)を使えるかにもよりますが、仮に質問者さんのスキルが、HTML&CSSの理解が中途で、その上で、未経験のPHP&JavaScriptを使いたいというものであれば、1、2週間モニタとにらめっこすればできるというものではありません。もちろん人によりますが、2、3ヶ月の学習期間は覚悟する必要があると思います。 あまりコストを割きたくないのであれば、どこかのテンプレートをそのまま使うという選択になると思います。もちろんこの場合、コストを使わない分、多くを求めることはできません。
関連するQ&A
- bootstrap3 タブ切替え内でのjquery
Bootstrap3のTab機能を使い、ページ遷移を行っているのですが、その際にタブ切り替えを行うと 切り替わったコンテンツ内のjavascript が機能しなくなります。 利用しているjquery はbxsliderです。 タブ１内で動いているスライダー、カルーセルをそのままタブ２、３、４にコピーしても動きません。 知識のある方の回答をお待ちしております。 宜しくお願いいたします。
- 締切済み
- JavaScript
- タブ切り替えが出来るjavascriptを使用しています。
タブ切り替えが出来るjavascriptを使用しています。 http://5am.jp/jquery/jquery_ui_tabs/ ここのサイトを参考にしてタブ切り替えが動くところまで行きましたが、 どうにかして、別ページからリンクをクリックした時に、特定のタブへ直接飛ぶようにしたいと思っています。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } }); }); </script> ヘッダーにある上記のjavascriptを少し編集すればできそうな気がするのですが、 もうお手上げになっちゃいました。 申し訳ないのですが、どなたか教えていただければと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 某ポータルサイトを運営してます。ホットペッパーのようにお店ページを分け
某ポータルサイトを運営してます。ホットペッパーのようにお店ページを分けたいです。 http://beauty.hotpepper.jp/slnH000138408/ のようにサロン情報、口コミ、メニューのように分けたいのですが、 これはURLが違うのでページごと変えてるんですか？ ただ、URLを見ると.htmlがついてないのですが、これはどういう風に作ってるのでしょうか？ できればSEOのためにURL一つでタブ切り替えみたいに作れれば（htmlで作れるのかわかりませんが）一番いいのですが。 php等の知識は全くありません。今までhtmlとCSS、java、sssだけで作ってきました。 どのように作れば良いのでしょうか？教えてください。
- ベストアンサー
- HTML
- タブ切替
下記サンプルを使ってタブ切替のページを作成したのですが、 タブだけでなく、ページ内に「次へ」「戻る」ボタンを追加する方法を教えてください。 ■タブ切替ページ http://archiva.jp/web/javascript/tab-menu.html ■追加内容 page1 最下部に「次へ」のボタンでpage2へ page2 最下部に「戻る」のボタンでpage1、「次へ」のボタンでpage3へ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript・Jqueryなにをどこまで？
本を使ってjavascriptの勉強を始めました。 使用している本→（よくわかるJavaScriptの教科書） ●勉強の動機 javascript勉強の動機ですが、現在スマフォサイトのマークア ップをメインに仕事をしており、今後もさらにjavascriptでの技術が使用されると思い始めました！ ●疑問 javascriptを簡単に使用できるJQueryの使い方も書いてあり、 jＱueryだけを覚えるだけで、難しいjavascriptを覚える必要があるのか疑問に思ってます。 他のサイトでjavascriptを覚えないとJQeryサンプルの編集ができないため、覚える必要があると 書いてありましたが、そのようにサンプルを編集する機会は実際どの多いのでしょうか。 また、話が変わりますが、フロントエンジニアに皆さん求めるレベルなどがありましたら、教えてほしいです。 ●今私ができる事 HTML５ CSS PHPの基礎は理解しています。 JQeryを使った、画像の切り替えやslideDown等を使った簡単な動きを書くこと。 長文になりましたら、どうぞよろしくお願いします。
- ベストアンサー
- 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> <!-- jQuery --> <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"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </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> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>
- 締切済み
- JavaScript
- jqueryとphpで変数をやり取りしたい
jqueryとphpで変数をやり取りしたい こんばんは 現在jqueryとphpのやり取りを模索しています phpで定義した変数(仮に$dataPHPとして)に文字列を入れておきます それを外部のjqueryにどうにかして渡す(この『渡す』方法が分からない・・・) そして、jquery内で受け取った変数から色々処理をして、最終的に今度は別の変数(また仮に$dataJQUERYとします)をPHPに渡します PHPではその変数を受け取り、以降の処理を進めていく、というものです 『jquery php データ 渡す』などで調べてみると、$.ajaxや$.postを使うとデータを渡せるとあり、実際にサンプルプログラムを動かしてみました しかし、javascriptからphpにデータを送ることはできても、コールバック関数というものでjavascriptに返ってきたり、innerHTMLで直接埋め込んでしまったりと、純粋に変数として保持できる方法が見つかりませんでした jqueryとphpで自由に変数を渡しあえる方法はないのでしょうか? 現在の環境はjquery1.4.2、php5、apache2、IE7です どうぞご教授願います
- ベストアンサー
- JavaScript
- jQueryのtabsについて
http://www.stilbuero.de/2007/10/23/jquery-ui-tabs-aka-tabs-3/ http://www.stilbuero.de/jquery/tabs_3/ http://www.special-sauce.com/sample/ マウスオーバーでタブ切り替え、かつ自動再生をさせたくて上記2点などのリンク先を参考に作りました。しかし以下のような問題が発生してしまいました。 テキスト1にマウスを置いてアニメーション途中でテキスト2へそしてテキスト1に戻るとアニメーションが途中で止まってしまう。 http://www.stilbuero.de/jquery/tabs_3/rotate.html 上記のデモサイト（こちらはクリックで動きますが。。）でも同じ症状がでるのでJavaScriptを書き足さないといけないのかもしれません。。JavaScriptがイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。
- 締切済み
- JavaScript
- jQueryとprototypeの共存
prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>
- ベストアンサー
- JavaScript
- タブ切り替え 複数同時を複数組 javascript
タブ切り替え 複数同時を複数組 javascript タブ切り替えのページを作りたいのですが ググっても複数同時に切り替えるものや複数組のものはあっても 複数同時を複数組切り替えるものはありません。 したいことは ｜タブ１｜タブ２｜タブ３｜ ｜コンテンツ1-1｜コンテンツ1-2｜コンテンツ1-3｜ ｜タブ４｜タブ５｜タブ６｜ ｜コンテンツ4-1｜コンテンツ4-2｜コンテンツ4-3｜ ｜タブ７｜タブ８｜タブ９｜ ｜コンテンツ7-1｜コンテンツ7-2｜コンテンツ7-3｜ ・ ・ ・ これが ｜タブ１｜タブ２｜タブ３｜←タブ２を押した場合 ｜コンテンツ2-1｜コンテンツ2-2｜コンテンツ2-3｜ ｜タブ４｜タブ５｜タブ６｜←タブ５を押した場合 ｜コンテンツ5-1｜コンテンツ5-2｜コンテンツ5-3｜ ｜タブ７｜タブ８｜タブ９｜ ｜コンテンツ7-1｜コンテンツ7-2｜コンテンツ7-3｜ ・ ・ ・ というのができません。 上のタブを操作すると 下のコンテンツが消えてしまい 下のタブを操作すると 上が消えたり また複数タブできた場合は 複数箇所同時はできませんでした。 javascript初心者の私にどなたかご教授を。 コンテンツそのものを消すやり方でもいいですが なるべくclassを変更で消す方法がいいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 その後、私も友人に聞いたりし、なんとなく意味がわかってきました。 カテゴリーページはMySQLのデータベースで条件抽出を行い作りたいと思います。（いわゆるこれがPHP+MySQLですかね？） あとはタブですが、これはページを分けた方がいいのか、javascriptで同一ページ内で作るか、、 ホットペッパービューティーはどうやらPerlで作ってるっぽいですね。 狙いとしては、重くなく、さくさく切り替えができ、 且つ、SEOに強く、更新しやすいページにしたいと思っています。 ページを分けると ・更新しにくい ・内容が分担されてしまうからSEOに弱くなる javascriptで同一ページで作ると ・更新しやすい ・SEOに強い ・ただし情報量が多いので最初の読み込みが遅くなる？ 僕のイメージではこういう感じです。 最適な方法は何なんでしょうか またタブで分けても内容がかぶって載ってる箇所っていうのは PHP等で同期できるものなのでしょうか？ それともホットペッパービューティーは各箇所を修正しているのでしょうか？ 今の段階ではまずはPHPの基礎から勉強していきたいと思っています。