• 締切済み

「サイト内、自動切換えタブ機能付きのページ」

「サイト内、自動切換えタブ機能付きのページ」 http://www.au.kddi.com/ 上記のサイトのTOP（index）の左カラムにある、 一定時間ごとにタブが切り替わる（この場合はアコーディオン風ですが）機能を つけてみたいのですが、解説していただけるサイト、または教えてgoo上にて お教えくださいませんか。 具体的には、ウェブコンテンツの一部のエリアに、5秒ごとにタブがくるくる切り替わる ニュース一覧を設けたいです。 あるときは企業情報のタブとその内容が表示されたり、 またあるときは芸能ニュースのタブとその内容が表示されたりと自動切り替わり。 さらにはその各タブ内のリストはデータベースから日付順にソートして引っ張ってくる。 そんなことがやりたいです。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

タブの切替えとクリック対応のサンプルです。 素で書くと長くなるので、jqueryを利用しています。 HTMLの整合性とかのチェックはほとんどしていませんので、あくまで雰囲気としてのサンプルです。 コンテンツを読込むのは、最初にサーバ側でセットして出力するか、ajaxで読込むなどご自由に。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> ul#tabs {list-style:none;padding:0;margin:0;cursor:pointer;} ul#tabs li {width:5em;float:left;margin-right:3px;text-align:center;border:1px solid #888;background-color:#ddd;} div#content {clear:both; position:relative;top:-1px;border:1px solid #888;z-index:-5;} div#content, div#content div.tab {width:500px;height:300px;background-color:#fff;} div#content div.tab {overflow:auto;} ul#tabs li.active {font-weight:bold;background-color:#fff;border-bottom:1px solid #fff;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var active="active",interval=5000; var index=0, timerId=null; var tabs=$("#tabs > li"), content=$("#content > div"); //初期設定 tabs.each(function(){$(this).removeClass(active);}); content.hide(); tabs.eq(0).addClass(active); content.eq(0).show(); //クリック処理 tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); }); setTimer(); //タイマー設定 function setTimer(){ timerId=setTimeout(timeProcess,interval); } //表示切替え function timeProcess(){ change((index +1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //タブ表示 function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); content.eq(index).stop(true, true).hide(); index=t_index; content.eq(index).show("slow"); } }); </script> </head> <body> <ul id="tabs"> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div id="content"> <div class="tab">content1</div> <div class="tab">content2</div> <div class="tab">content3</div> </div> </body>

raryrary
質問者

補足

サンプルまでいただいてありがとうございます。 只今実装、編集をしていますので理解できましたら 再度あらためて御礼いたします。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

　ご希望の機能のやり方を、ずばりとそのまま解説してくれるサイトを 見つけるのはたいへんでしょう。 　全体の流れを考えてみて、どんな機能が必要か、どんな順序で実行すれば よいか等、まず概要の設計っぽいのを考えてみましょう。 　機能ごとにやり方を探せば、容易に解決策が見えてきます。 「データベースから引っ張ってくる」の部分は難関です。javascriptには データベースをアクセスする機能がないので、どうしても別途サーバー側 のプログラムを作る必要があります。 　変わりに、YahooとかGoogleの検索APIサービスを使って、特定カテゴリー のニュースや情報を取得し、javascriptのAJAXの機能で動的なコンテンツ を生成できます。 　タブメニューとかアコーディオンとかAJAXを組み合わせて、タイマ－で コントロールすれば、そんなに困難じゃなさそうです。 　全部をフルスクラッチでコーディングするよりは、jQuery等のフレームワーク ライブラリーを使いつつ、タブメニューとかアコーディオンとかポップアップ とか、目的にあったパーツを探して、組み上げるといった流れがよいかも。 　最初から全部を一度に作り上げようとせず、機能ごとに部分部分作っていくの が懸命です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • タブを開いても「良く使うサイト」がでないように

    vistaを使用しています。 新しいタブを開くと、 「よく使うサイト」 が表示されます。 この機能をoffにしたいのですが、どうしたら良いしょうか？ つまり、履歴がわからないようにしたいのです。 よろしくお願いいたします。

  • Javascriptで曜日毎に自動でタブ切り替え

    曜日ごとにタブ切り替えを自動でおこなう方法 HPで曜日ごとに自動でタブを切り替える方法などありますでしょうか？ こちらは複数ページを用意し各ページへリンクを飛ばすのではなく、単一ページでその内容を随時変えたいです。 現在、Javascriptを使い曜日の取得をおこなっております。 またその曜日ごとに合わせたタブを作り、タブの内容を曜日ごとに分けております。 日付は１週間毎自動で取得しますが、タブが一定の曜日を選択した状態で固定されてしまっています。（水曜日にサイトを訪問しても月曜日のタブが選択されている状態。） こちらを曜日に合わせたタブを自動で選択するように出来ますでしょうか？（水曜日にサイトを訪問したら最初から水曜日のタブが選択されている状態。） （例） 【現在】 ・月曜日→（月曜日のタブが選択されている状態で表示） ・火曜日→（月曜日のタブが選択されている状態で表示） ・水曜日→（月曜日のタブが選択されている状態で表示） 【理想】 ・月曜日→（月曜日のタブが選択されている状態で表示） ・火曜日→（火曜日のタブが選択されている状態で表示） ・水曜日→（水曜日のタブが選択されている状態で表示） できればPHPなどは使わず、JavaScriptで実装したいと考えております。 参考のサイトなども教えて頂けますと幸いです。 皆様どうぞよろしくお願いいたします。

  • Javascriptで曜日毎に自動でタブ切り替え

    曜日ごとにタブ切り替えを自動でおこなう方法 HPで曜日ごとに自動でタブを切り替える方法などありますでしょうか？ こちらは複数ページを用意し各ページへリンクを飛ばすのではなく、単一ページでその内容を随時変えたいです。 現在、Javascriptを使い曜日の取得をおこなっております。 またその曜日ごとに合わせたタブを作り、タブの内容を曜日ごとに分けております。 日付は１週間毎自動で取得しますが、タブが一定の曜日を選択した状態で固定されてしまっています。（水曜日にサイトを訪問しても月曜日のタブが選択されている状態。） こちらを曜日に合わせたタブを自動で選択するように出来ますでしょうか？（水曜日にサイトを訪問したら最初から水曜日のタブが選択されている状態。） （例） 【現在】 ・月曜日→（月曜日のタブが選択されている状態で表示） ・火曜日→（月曜日のタブが選択されている状態で表示） ・水曜日→（月曜日のタブが選択されている状態で表示） 【理想】 ・月曜日→（月曜日のタブが選択されている状態で表示） ・火曜日→（火曜日のタブが選択されている状態で表示） ・水曜日→（水曜日のタブが選択されている状態で表示） できればPHPなどは使わず、JavaScriptで実装したいと考えております。 参考のサイトなども教えて頂けますと幸いです。 皆様どうぞよろしくお願いいたします。

  • Javascriptで曜日ごとにタブ切り替えを自動

    HPで曜日ごとに自動でタブを切り替える方法などありますでしょうか？ こちらは複数ページを用意し各ページへリンクを飛ばすのではなく、単一ページでその内容を随時変えたいです。 現在、Javascriptを使い曜日の取得をおこなっております。 またその曜日ごとに合わせたタブを作り、タブの内容を曜日ごとに分けております。 （サンプルサイト） http://sample.ul-inc.jp/ 日付は１週間毎自動で取得しますが、タブが一定の曜日を選択した状態で固定されてしまっています。（水曜日にサイトを訪問しても月曜日のタブが選択されている状態。） こちらを曜日に合わせたタブを自動で選択するように出来ますでしょうか？（水曜日にサイトを訪問したら最初から水曜日のタブが選択されている状態。） （例） 【現在】 ・月曜日→（月曜日のタブが選択されている状態で表示） ・火曜日→（月曜日のタブが選択されている状態で表示） ・水曜日→（月曜日のタブが選択されている状態で表示） 【理想】 ・月曜日→（月曜日のタブが選択されている状態で表示） ・火曜日→（火曜日のタブが選択されている状態で表示） ・水曜日→（水曜日のタブが選択されている状態で表示） できればPHPなどは使わず、JavaScriptで実装したいと考えております。 参考のサイトなども教えて頂けますと幸いです。 皆様どうぞよろしくお願いいたします。

  • webサイトのページ送り機能について

    webサイトのページ送り機能について教えて下さい。 表示コンテンツが大量にある場合で（100件以上）、例えば１ページに10件ずつ表示させ、サイトの下部に[1][2][3]・・次のページへなどを設定させるにはどのようにしたら良いのでしょうか？また、定期的に新規のコンテンツが追加されていくので、1ページ目から順次追加されるようにしたいです。 初心者ですので参考サイトやサンプルなどでも構いませんが、若干、解説をして頂けると助かります。 恐れ入りますが、ご回答宜しくお願い致します。

  • PHP+MySQLからHTMLページを自動生成？

    初めまして、質問させていただきます。 フォーム（PHP）から送信されたデータ（コメントや写真等）を データベースへ（MySQL）と格納し、 その内容を新規HTMLページを自動生成させ表示させることは可能でしょうか？ 既存するPHPで動的に内容を表示させることは簡単に出来るのですが、 そうではなくて、ユーザーから投稿された内容を、 自動的に新規ページを作成して表示させるようにしたいと思っています。 分かりやすく言えば、投稿されたデータをテンプレートに当てはめ、 新規ページを生成するまでをサーバー上で自動的に行いたいのです。 できればPHPとMySQLでこれらを行えればと考えているのですが、 無理ならば他のものでもかまいません。 ちなみに、PHPとMySQLはまだまだ初心者です。 DreamWeaverの機能で動作させ、少しいじれる程度です。 どうかアドバイスをお願いいたします。

    • ベストアンサー
    • PHP
  • Netscapeでタブを切り替えるとき、教えてgooだけページトップに戻るのはなぜ？

    こんにちは。 ブラウザはNetscape 7.1、OSはWIndows XPを使用しています。 タブが便利なのでよく使っていますが、そのタブの切り替えについて質問です。 今のところ、教えてgoo以外のサイトでは、 例えば[タブA]で表示したページの下のほうまでスクロールしてから[タブB]にクリックして切り替えたとき、 [タブB]から[タブA]に戻っても、スクロールしたままの位置が表示されます。 でも、教えてgooを[タブA]で表示していて、 同じように一番下にあるNo.1の回答をスクロールして表示させ、 [タブB]に切り替えてからまた[タブA]に戻ってくると、 今まで表示していたはずのNo.1の回答の位置ではなく、 ページの一番上の質問のところまで自動的に戻ってしまうのです。 これはどうしてなのでしょうか？ なんとも簡潔に書くのが難しい疑問なので、わかっていただけるといいなと思うのですが・・・ さっきNo.1の回答を見ていたのに、戻ってきたらページトップになってしまっているので またスクロールし直し・・・という操作の連続で、微妙に不便です(^-^; 直せるものなら直したい・・・ どうぞよろしくお願いします。

  • IE9の新しいタブ

    IE9では[新しいタブ] ページのデザインが一新されて、よく訪れるサイトが表示され大変便利と思っていましたが、ある無料のソフトをダウンロードしましたらその便利な機能が利用できなくなりました。やむを得ず、「新しいタブ」を空白のページにしていますが、「新しいタブ」でよく訪れるサイトが表示されるように戻す方法を教えてください。尚、無料のソフトをアンインストールしましたが回復しませんでした。

  • ホームページのサイト内検索の仕組み

    私は自分でホームページを作成しようかと考えているのですが、その中でサイト内検索機能をつけようと思っています。 そのサイト内検索機能では、ただ検索ワードにしたがって結果を表示するのではなく、歴史の年代順に検索結果を表示したいと思っています。 つまり検索ワードと比較した後年代順にソートをしたいと考えています。 私はHTMLとPHPとMySQLの知識はあるのですがFFFTPの知識がありません。 自分のパソコン内では検索結果はちゃんと出来ますが、ホームページとして公共に公開するときには、MySQLの中のデータベースの内容は一緒に送られるものなのでしょうか？ つまり、自分のパソコン内で組んだプログラムで自分のMySQLの中身を検索することは出来ますが、一度ホームページをアップしたときに、同時にMySQLのデータベースの内容もアップされているのかと言うところがわかりません。 自分のパソコンの電源を切って、他のパソコンで自分のサイトを検索してサイト内検索をしてもちゃんとデータベースの内容が向こうに送られているものなのでしょうか？ FFFTPだけがわからずに困っています。 長文失礼しました。 よろしくお願いします・

  • 接続タブが出なくなった

    こんにちは。 OS：WINDOWS2000（SP4） ブラウザ：IE5.5（SP2）の環境です。 何をしてからかは不明なのですが、 IEのツール→インターネットオプションの「接続」タブが 突如消えてしまいました。他の 「全般」「セキュリティ」「コンテンツ」 「プログラム」「詳細設定」のタブは 正常に表示されていて、 正常に機能しているようです。 復旧方法について教えてください。 レジストリの書き換えとかでしょうか。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する