• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：jqueryのタブ切り替えについて）

jqueryのタブ切り替えについて

tracerの回答

  • tracer
  • ベストアンサー率41% (255/621)
回答No.3

jQueryはjavascriptによって書かれたライブラリなので、jQueryはjavascriptです。 といってもわかりづらいですよね。javascriptによって書かれたライブラリはたくさんありますが、基本的にJavascriptは1種類しかないと思ってよいと思います。(もちろん厳密には1種類ではないですが。) たとえば、日本語にも略語というものがあります。 安保理とか芸大、ゼネコン、セクハラなどなど。全部略語ですね。で、この略語は何語かというと日本語です。つまりJqueryとJavaScriptの関係は、略語と日本語の関係に似ていると思います。 さて、本題ですが。 javascriptは基本的にHTMLやCSSを操作しているだけなので、HTML&CSSをご存知であれば、そんなに難しいことはないと思います。たとえばタブの実装は、単純にCSSのdisplayを切り替えているだけです。なので、displayを切り替えるだけなら動作は軽いものです。 ただし、表示したい内容が外部サイト(Google、YouTube)から読み込むタイプのものであれば、切り替えるのに時間がかかるというよりは、表示されるまでに読み込む時間は必要ですね。素早く切り替えをさせるにはあらかじめ表示させたいコンテンツを読み込んでおく必要があるわけですが、ここからは本題とずれちゃいますね。

peco33
質問者

お礼

jqueryは軽いんですね。 ちなみにPHPと比べるとどっちがいいのでしょうか？ また、作りやすさ、ページの完成度でいうとどちらでしょうか？

この回答がついた質問に戻る
回答 全件
ベストアンサー
おっしゃっていることを私がやるとするならば、店舗数が多いのであれば、M…
ひとことで言ってしまえば、最適な方法、つまり正解なんてものはありません…
> jqueryは軽いんですね。 > ちなみにPHPと比べるとどっちが…
jqueryはjavascriptをさらに簡単にしたものなのですね。て…
ホットペッパービューティーが何者なのか知らないですが、 おそらくPHP…
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • bootstrap3 タブ切替え内でのjquery

    Bootstrap3のTab機能を使い、ページ遷移を行っているのですが、その際にタブ切り替えを行うと 切り替わったコンテンツ内のjavascript が機能しなくなります。 利用しているjquery はbxsliderです。 タブ１内で動いているスライダー、カルーセルをそのままタブ２、３、４にコピーしても動きません。 知識のある方の回答をお待ちしております。 宜しくお願いいたします。

  • タブ切り替えが出来る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を少し編集すればできそうな気がするのですが、 もうお手上げになっちゃいました。 申し訳ないのですが、どなたか教えていただければと思います。 よろしくお願いします。

  • 某ポータルサイトを運営してます。ホットペッパーのようにお店ページを分け

    某ポータルサイトを運営してます。ホットペッパーのようにお店ページを分けたいです。 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・Jqueryなにをどこまで？

    本を使ってjavascriptの勉強を始めました。 使用している本→（よくわかるJavaScriptの教科書） ●勉強の動機 javascript勉強の動機ですが、現在スマフォサイトのマークア ップをメインに仕事をしており、今後もさらにjavascriptでの技術が使用されると思い始めました！ ●疑問 javascriptを簡単に使用できるJQueryの使い方も書いてあり、 jＱueryだけを覚えるだけで、難しいjavascriptを覚える必要があるのか疑問に思ってます。 他のサイトでjavascriptを覚えないとJQeryサンプルの編集ができないため、覚える必要があると 書いてありましたが、そのようにサンプルを編集する機会は実際どの多いのでしょうか。 また、話が変わりますが、フロントエンジニアに皆さん求めるレベルなどがありましたら、教えてほしいです。 ●今私ができる事 HTML５ CSS PHPの基礎は理解しています。 JQeryを使った、画像の切り替えやslideDown等を使った簡単な動きを書くこと。 長文になりましたら、どうぞよろしくお願いします。

  • 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>

  • 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です どうぞご教授願います

  • 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がイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。

  • 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 タブ切り替えのページを作りたいのですが ググっても複数同時に切り替えるものや複数組のものはあっても 複数同時を複数組切り替えるものはありません。 したいことは ｜タブ１｜タブ２｜タブ３｜ ｜コンテンツ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を変更で消す方法がいいです。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する