- ベストアンサー
タブ切替えメニューの懸念点について
- ＷＥＢサイトのリニューアルを計画しています。コンテンツ1とコンテンツ2は情報量が多いため、タブ切替メニューを導入する予定です。
- カテゴリ1とカテゴリ2の両方のページでタブ切替えメニューを使用する場合、ユーザービリティやその他の懸念事項があるか教えてください。
- タブ切替えメニューを導入する際に気をつけるべきポイントや改善策についてご教示いただければ幸いです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- タブ切替
下記サンプルを使ってタブ切替のページを作成したのですが、 タブだけでなく、ページ内に「次へ」「戻る」ボタンを追加する方法を教えてください。 ■タブ切替ページ http://archiva.jp/web/javascript/tab-menu.html ■追加内容 page1 最下部に「次へ」のボタンでpage2へ page2 最下部に「戻る」のボタンでpage1、「次へ」のボタンでpage3へ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- bootstrap3 タブ切替え内でのjquery
Bootstrap3のTab機能を使い、ページ遷移を行っているのですが、その際にタブ切り替えを行うと 切り替わったコンテンツ内のjavascript が機能しなくなります。 利用しているjquery はbxsliderです。 タブ１内で動いているスライダー、カルーセルをそのままタブ２、３、４にコピーしても動きません。 知識のある方の回答をお待ちしております。 宜しくお願いいたします。
- 締切済み
- JavaScript
- WEBブラウザで、ページを戻っても最後に表示したタブ切替コンテンツ（javascriptで作成）を表示する方法を教えてください。
javascriptで、ページ遷移せずに内容をタブ切替できるページを作成していますが、別ページへリンクしたあと、ブラウザでの「戻る」やjavascriptの「history.back」で戻ったときにタブコンテンツが最後の状態で表示できる方法がありましたら教えてください。 そのページはECサイトの商品紹介のページで、一覧のカテゴリをタブで切り替えられるようにしています。 一覧から詳細ページへ遷移し、そこから一覧へ戻った時に、最後に見ていた内容がリセットされてしまうことを回避したいです。 ユーザーはついさっきまで見ていた内容にたどり着くまでに不要な煩わしさが生じてしまうので良くないのです。 どうぞよろしくお願いいたします。
- ベストアンサー
- 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
- タブの切り替えについて
こちら（http://5am.jp/jquery/jquery_ui_tabs/）のサイトを参考に JSはそのまま使用し、CSSのみ少し手を加えて、タブの切り替えを作成したのですが、 タブを切り替える度にページトップへスクロールしてしまいます。 JSに手を加えてこれを回避する方法はあるのでしょうか？
- 締切済み
- JavaScript
- javaスクリプトを使ったタブ切り替えに関して質問です。
javaスクリプトを使ったタブ切り替えに関して質問です。 http://blog.livedoor.jp/soken2ch/contents/itmobile/ このページの下部にもう一つタブエリアを作りたいのですが、一つのページにタブエリアを複数作るのにはどう記述すればいいのでしょうか？ よろしくお願いいたします。
- 締切済み
- JavaScript
- タブ切り替えの初期表示について
タブ切り替えの初期表示について、 http://okwave.jp/qa/q7730198.html?from=navi_recommend http://www.finefinefine.jp/web/kiji422/ を参考に作成中です。 特定のページからリンクされた時のみタブ2を表示させて、 それ以外の時はタブ1を表示させたいです。 ですが、特定のページからリンクされた時にタブ2は表示できるのですが、 それ以外の時は<div class="content_wrap">内容</div>のところは何も表示されません。 どうしたら「それ以外の時はタブ1を表示」できますでしょうか。 ------------------------------------------------------ ●特定のページからのリンク <a href="000.html?no=1"> </a> ●000.htmlのJavaScript $(function() { var n = window.location.href.slice(window.location.href.indexOf('?') + 4); $(".content_wrap").hide(); $(".content_wrap").eq(n).fadeIn(); $(".tab li").removeClass('select'); $(".tab li").eq(n).addClass('select'); $("#tab li").click(function() { var num = $("#tab li").index(this); $(".content_wrap").hide(); $(".content_wrap").eq(num).fadeIn('disnon'); $("#tab li").removeClass('select'); $(this).addClass('select') }); }); ●000.htmlのHTML <div id="sample"> <ul id="tab"> <li>タブ1</li> <li>タブ2</li> </ul> <div class="content_wrap">内容1</div> <div class="content_wrap">内容2</div> </div> ------------------------------------------------------ 初歩的な事かもしれませんが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- タブでcookieを使ったのですが…
Javascriptを使ってタブ付きのボックスを作ったのですが、少々問題があり解決法が見つからないのでここに投稿させていただきます。 カテゴリが[技術者向]となっていますが私は初心者です...。 まずタブで表示を切り替えるUIというのはたとえば以下のサイトにあるようなものですが、問題が起きるのは私が独学で作成したものです。 http://archiva.jp/test/html/tab-menu.html また、以下のような機能があります。 ・タブ以外の部分を非表示にできる（その状態をcookieで記憶しておく） ・表示しているタブをcookieで記憶しておく ・タブにマウスポインタを乗せるとタブの背景画像が変わる（ロールオーバー） ・表示しているタブの背景画像を変える ・ウィンドウの幅に合わせて自在にサイズを変化させる cgiの掲示板にタブ切り替えを設置したのですが、cookieがうまく働いてくれないらしく表示/非表示の操作ができないことがあります... その他にも、ブラウザによって（ウィンドウ幅を縮めると）タブメニューの中の文字がはみ出してしまったり、表示しているタブを記憶できないなどの問題が起きます。 以下のURLに全く同じタブ切り替えを設置しました。 http://www7a.biglobe.ne.jp/~g-s-b/tabs/tabs.html なぜcgiに設置すると問題が起きるのか、全くわかりません... ですが掲示板が複数のcgiで構成されており、タブを含む、css等の共通部分を別に読み込んでいるので、タブを閉じたままにするままにはクッキーを使う以外の方法を思いつきません。 このようなタブ切り替えを安定して、多くのブラウザで利用できるようにするにはどのようにすればよいでしょうか。 また、なぜcgiだと問題（cookieが保存されているのに動作しない等）が起きるのでしょうか。 長くなってしまいましたが、どなたかご回答をよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 別ページからのタブ切り替えの表示について
こちらのサイト（http://www.finefinefine.jp/web/kiji422/）を参考にタブの切り替えをしています。 ページAからページBのタブのコンテンツにダイレクトに飛べるように以下のスクリプトを設定しています。 ページAからボタンをクリックした時に、 全てのタブが開いている状態のパターンも作成したいと思っているのですが やり方がわからず悩んでいます。 どなたかお分かりの方がおられましたら どうかご教授頂けないでしょうか。 ■ページAにリンクを設置 <a href="b.html?no=0">ページBのタブ1にジャンプ</a> <a href="b.html?no=1">ページBのタブ2にジャンプ</a> ↓これを追加したいです。 <a href="">ページBのコンテンツ全て表示</a> ページB（タブページ）に以下のスクリプトを設置 ■java script $(function() { var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4); $(“.content_wrap”).hide(); $(“.content_wrap”).eq(n).fadeIn(); $(“.tab li”).removeClass(‘select’); $(“.tab li”).eq(n).addClass(‘select’) $(“.tab li”).click(function() { var num = $(“.tab li”).index(this); $(“.content_wrap”).hide(); $(“.content_wrap”).eq(num).fadeIn(); $(“.tab li”).removeClass(‘select’); $(this).addClass(‘select’) }); }); $(function() { var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4); if(n.length < $(".content_wrap").size()) { var p = $(".content_wrap").eq(n).offset().top; $('html,body').animate({ scrollTop: p }, 'slow'); return false; } }); どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
