- ベストアンサー
JavaScriptでタブメニューを実装したいと思っています。
JavaScriptでタブメニューを実装したいと思っています。 http://archiva.jp/web/javascript/tab-menu.html 上記サイトよりソースを頂いて実装したいと考えているのですが、こちらのサイトでは5つタブがあるため配列を使用しています。 今回実装したいページは、タブが2つのみなので配列は必要ないかと思いました。 色々調べても勉強不足のためどうしても条件分岐に書き換える方法が分からなく行き詰ってしまったため、お力添え頂きたく質問させていただきました。 大変申し訳ないのですが、教えていただければありがたいです。 どうぞ宜しくお願い致します。
- macocco0718
- お礼率83% (5/6)
- JavaScript
- 回答数2
- ありがとう数15
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
質問の目的がよくわからないのですが、 単に配列を止めたいだけですか、いっそのことオブジェクト指向も 止めてシンプルにしたいとか？ こんなふうに、 <body> <ul id="tab"> <li class="present" onclick="showpage(this)"><a href="#page1">Page_1</a></li> <li onclick="showpage(this)"><a href="#page2">Page_2</a></li> </ul> <div id="page1">11111 11111 11111</div> <div id="page2">22222 22222 22222</div> <script type="text/javascript" charset="utf-8"> <!-- document.getElementById('page2').style.display = 'none'; function showpage(obj){ var tabs = document.getElementById('tab').getElementsByTagName('li'); var page1 = document.getElementById('page1'); var page2 = document.getElementById('page2'); var num; for(num=0; num<tabs.length; num++){ if(tabs[num] === obj) break; } if(num==0){ page1.style.display = 'block'; tabs[num].className = 'present'; page2.style.display = 'none'; tabs[num].className = 'null'; }else{ page1.style.display = 'none'; tabs[num].className = 'null'; page2.style.display = 'block'; tabs[num].className = 'present'; } } // --> </script> </body>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
2以上であれば（1つではタブにならないけれど）、わざわざ配列をはずすことも無いのではないでしょうか？ （2つでも配列を利用する価値はあります。） 将来、1つ増える可能性なども考えれば、そのまま利用するほうが懸命では？ どうしても2つ専用にしたければ、tabをあらわすflagでも用意して、 tab1.style.display = flag?"block":"none"; tab2.style.display = flag?"none":"block"; みたいにベタで書いてもいけるかと…
お礼
知識不足のため、もしかしたら配列が原因ではないかもしれません。。。 今回ソースは5つのタブですが、2つのタブにしたとたんIEでエラーが出てしまいました。 お忙しい中丁寧に教えていただき本当にありがとうございます。 JavaScriptを理解できるようにがんばって勉強致します。 本当にありがとうございます。
関連するQ&A
- タブメニューの解除方法
http://archiva.jp/web/javascript/tab-menu.html 上記アドレスにあるタブを使用したいと思っているのですが、 タブ表示、そうではない一覧表示をプルダウンにて切り替えが 出来ればなぁと考えております。 どなたか方法を教えていただければと思います。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- javascript タブメニューに直接リンクする
質問させてください。 ただいま http://blog.creamu.com/mt/2009/12/jquery_24.html こちらのページを参考にサイトを作成しているのですが、 他ページから直接タブメニューのタブ３にリンクをしたいのですが、 出来ません。 http://okwave.jp/qa/q5590389.html こちらのページを参考に違うスクリプトを使おうと思ったのですが、 そうすると既に実装してあるcodasliderが動かなくなってしまうのです・・・・ なので現状のタブ切り替えのスクリプトを使ってタブへのリンクを実現したいのです。 恐れ入りますが、どなたかお知恵を貸していただけませんでしょうか・・・ よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery タブメニューへのダイレクトリンクの仕方を教えてください。
jQuery UI タブ http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm を参考にタブメニューを制作しているのですが、 同ページ及び、他ページから各タブメニューへ ダイレクトにリンクすることはできるのでしょうか。 ただ、ここで http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3 とリンク先を指定すると「ソース」というところに ダイレクトにリンクするのですが、 ボタン等で指定するとうまくリンクしません。。。。。 方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- タブメニューについて
こんにちは。 早速ですが、 http://www.1uphp.com/con2/over/over3.html のサイトを参考にしながらタブメニューを作っているのですが、たとえば「NEWS」のページにジャンプした時、「NEWS」メニューのオーバー状態のタブにする事は可能でしょうか？ 初心者ですが、宜しくお願い致します。
- ベストアンサー
- JavaScript
- タブメニューを上下に設置
下記サイトを参考にタブメニューを作成しました。 http://5am.jp/jquery/jquery_ui_tabs/ こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。 スクリプトをどのように すればいいかお分かりの方がおられましたら ご教授頂けませんでしょうか。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> <div id="tabs"> <ul> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <div id="tab1"> <p>タブ1の内容</p> </div> <div id="tab2"> <p>タブ2の内容</p> </div> <div id="tab3"> <p>タブ3の内容</p> </div> <ul class="bottom_tab"> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> </div> どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- cssでタブメニューのhoverとavtive
いつもお知恵拝借、ありがとうございますm(_ _)m ごく最近、cssを勉強し始めたばかりの超・初心者です。タブメニューを作っているのですが、 #cell2 :hover,#cell2 a:active { background-image:url(tab.gif); } として、ポインタがメニューの上に来た時と、クリックしてそのページへ飛んだときの背景を「tab.gif」に設定しました。 hoverの時は、ちゃんと背景が「tab.gif」になるのですが、リンク先のページに飛んだとき(そのページも全く同じタブメニューがある)に、activeで背景が「tab.gif」にならないのです。 何か基本的な知識不足ではないかと思うのですが、どうかご教授の程よろしくお願いしますm(_ _)m ソフトはwin xp+Homepage Builder10です。
- ベストアンサー
- ホームページ作成ソフト
- リンクをJavascriptで実装している理由は？
大手の会員制サイトなどで、リンクがAタグではなくJavascriptで実装されているものがあります。なぜわざわざJavascriptで実装しているのでしょうか？ 私の個人的なネットサーフィンのやり方として、リンクをCtrlボタンを押しながらクリックして新しいタブで開いてます。target="_blank"と指定されたAタグをクリックしても新しいタブが開きますが、Ctrl+クリックは画面が切り替わらないので、例えばメールボックスで見たいメールへのリンクを先に一通り開いておき、後で「メールを見る」という作業だけを連続的に行え、効率的です。 しかしJavascriptで実装されたリンクはクリック時、Ctrl（新しいタブで開く）やShift（新しいウィンドウで開く）を押していてもそれが効かず、スクリプト側の制御に委ねられる形になります。これは不便ですし、スクリプトを組む手間もかかるやり方だと思います。なぜわざわざこのような方法を使っているのでしょうか？ 以下、私の予想です。 (X)HTMLの今後の仕様として、「target属性を廃止し、どのような方法でリンク先へジャンプするかはユーザに選ばせる」という動きがあるそうだが、制作者側がジャンプ方法を強制する為にJavascriptを使ったのか。しかし会員制サイトのような特にユーザ主体性の大きいサイトがユーザの利便性（操作性）を奪うような方法をとるだろうか。また、新しい仕様はまだ一般的には浸透していないので先走ってそれに合わせたということは前述の理由から考えにくいし、(X)HTMLはマークアップ言語なので仕様に沿っていないことによる不利益はSEOぐらいしか考えられない（SEO対策は重要だが）。また、pdfなどのバイナリデータがトップにヒットするケースもあるので、不利益といってもどの程度のものかは不確かである。
- 締切済み
- JavaScript
- jQueryタブメニュー内、パネル間のリンク方法。
javascript勉強中です。 立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。 下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。 （下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(".area").hide(); var tabs = $(".tab01 li"); tabs.click(function(){ var i = tabs.removeClass("active").index(this); tabs.eq(i).addClass("active"); $(".content .area").hide().eq(i).fadeIn(400); return false; }); var hash = window.location.hash.match(/#tab(\d+)/); hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0; tabs.eq(hash).click(); }); </script> </head> <body> <div id="tabs"> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1"><a href="#tab2">test1</a></div> <div class="area" id="tab2">test2</div> <div class="area" id="tab3">test3</div> </div> </div> </body> </html> 何卒宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQueryの画像を使ったタブメニューについて
下記のサイトを参考にタブメニューを制作いたしました。 jQueryを使ったタブ（画像）による画面切り替え http://web.showjin.me/2011/05/jquery_tab_image.html 各コンテンツの中にリストタグやpタグなどで内容を記載すると うまくいくのですが、divタグを使用するとまったく表示されないようです。 divタグに style="display: none;"と読み込まれてしまいます。 各コンテンツの内容にjqueryを使用してサムネイルのアルバムを設置したいと 思っているので、divタグなどでも問題なく表示されるようにしたいと思っています。 scriptを修正して実現できる方法が分かる方がおられましたら お教え頂けないでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
yyr446さま お世話になっております。 丁寧なスクリプトまで本当にありがとうございます。 なんとお礼を言っていいのか分かりません。。。 本当にありがとうございます。 今回配列を使っているからか、2つのタブだとIEでエラーが出てしまいこのような質問をさせてしまいました。 無事に実装することができました。 こちらをじっくり拝見させて頂いて勉強させて頂きます。 本当に本当にありがとうございました。