タブボックスを複数設置する方法
- タブボックスを複数設置する方法についてご教授ください。
- 質問者は初心者で、ページ内に連番のタブボックスをたくさん設置したいと考えています。
- 現在のコードでは、Toggleの記述がうまく動かない状況です。
- ベストアンサー
１ページ内にタブボックスをたくさん設置
下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定です このため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、 Toggleのところの記述が悪いのかうまく動きません。 初心者ですいませんが、ご教授ください <!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>
- iguigu_n
- お礼率6% (2/33)
- JavaScript
- 回答数2
- ありがとう数10
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
何をなさりたいのかよくわかってませんが・・・ タブ形式の表示が複数あるHTMLに対してスクリプトでタブとして機能するようにしたいのではないかと想像しました。 ご質問に対する直接の回答にはなっていませんが、 まず、ご提示の様な番号を振る考え方から脱却したほうがよさそうに思われます。 （ご提示のHTMLだとidが重複しているので、文法違反にもなっています） ざっと見たところ、<ul class="tab_menu">とそれに続く<div class="tab_box">がセットになっていて、タブの要素を構成していると見受けました。 タブ的な切替表示ができれば良いだけであれば、要素の位置関係を利用して処理するようにすればよいと思われます。例えば、2番目のタブ（LI要素）をクリックしたら、2番目のコンテンツ（DIV要素）を表示するといった感じです。 これによって、idや番号は不要になりますし、li要素内ののリンクタグも不要にできます。(href属性の参照はしなくなるので） 制御で必要になるのは要素の意味を示すクラスだけで充分ですし、それは同時に、レイアウトや表示を制御するためにCSSで必要とする識別子としても（多分）十分なのではないでしょうか？ 現状のままでも良いですし、わかりやすくする意味でtab_menuとtab_boxをセットにして（例えばtab_setで）ラップしておいても良いかと思います。 スクリプトは『同じtab_set内で対応する順序の要素を表示する』といった内容で作成すれば、セットの数によることなく処理が可能ですし、タブの数がそれぞれで違っていても問題ないでしょう。 tab_menu内のLI要素数とtab_box内のDIV要素数が異なっている場合（通常はないはずですが）にスクリプトのエラーがおきる可能性がありますが、対応する要素が存在しない場合は処理しないようにするなどで、HTMLがおかしな場合でもエラーを回避することは可能と思われます。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ごく一般的なタブ機能のようですから、検索すればサンプルはいくらでも見つかるはずと思います。（考え方や方法はいろいろあると思いますが） また、jQueryをご利用のようですが、jQuery UIにも標準的なタブ機能が備えられています。 http://jqueryui.com/tabs/ とはいえ、簡単なサンプルを一例として… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>Sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .tab_set *{ margin:0; padding:0; list-style-type:none; } .tab_set{ width:600px; margin-bottom:30px; } .tab_menu li{ width:86px; display:inline-block; padding:4px; margin-right:4px; text-align:center; color:#888; background-color:#E8E8E8; border:1px solid #AAA; } .tab_menu li.active{ color:#000; background-color:#FFF; border-bottom:1px solid #FFF; } .tab_box{ position:relative; top:-1px; z-index:-1; } .tab_box>div{ height:300px; padding:10px; border:1px solid #AAA; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var active = "active"; $(".tab_set").each(function(){ $(".tab_menu li", this).click(function(){ var tabs = $(this).parent(".tab_menu").children(); tabs.removeClass(active); $(this).addClass(active); var contents = $(this).parents(".tab_set").find(".tab_box").children("div"); contents.hide().eq(tabs.index(this)).show(); }).eq(0).click(); }); }); </script> </head> <body> <div class="tab_set"> <ul class="tab_menu"> <li>タブ1</li><li>タブ2</li><li>タブ3</li> </ul> <div class="tab_box"> <div>タブボックス1</div> <div>タブボックス2</div> <div>タブボックス3</div> </div> </div> <div class="tab_set"> <ul class="tab_menu"> <li>タブ1</li><li>タブ2</li><li>タブ3</li><li>タブ4</li><li>タブ5</li> </ul> <div class="tab_box"> <div>タブボックス1</div> <div>タブボックス2</div> <div>タブボックス3</div> <div>タブボックス4</div> <div>タブボックス5</div> </div> </div> <div class="tab_set"> <ul class="tab_menu"> <li>タブ1</li><li>タブ2</li><li>タブ3</li> </ul> <div class="tab_box"> <div>タブボックス1</div> <div>タブボックス2</div> <div>タブボックス3</div> </div> </div> </body> </html>
関連するQ&A
- １ページ内に 複数のタブボックスを設置
１ページ内に 複数のタブボックスを設置するために、下記のようなコードを記載しました。 おそらく最後のToggleをつかってタブを切り替えるところの記載方法がよくわからないため動かず困っています。すいませんがだれかご教授ください。 <!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>
- ベストアンサー
- JavaScript
- Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- プルダウンメニューの設置について
【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか？ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。
- ベストアンサー
- ホームページ作成ソフト
- タブメニューを上下に設置
下記サイトを参考にタブメニューを作成しました。 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
- 画像を使用したタブを複数設置
下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく 同じscriptをjsファイルに3つコピーし 設置しましたが、エラーで動かなくなったので 各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01～03、 a.selectedをa.selected01～03と それぞれ変更してみました。 上記の方法で動作は実現できたのですが、 これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。 どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ（IE対策）*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。 マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })
- ベストアンサー
- JavaScript
- カテゴリページ内 複数タブ
wordpressでサイト作っています idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。 初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryのコードで分からない箇所があります
プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)
- ベストアンサー
- SE・インフラ・Webエンジニア
- 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
- IE6／ブロック要素のliで入れ子がある場合に改行のような余計なマージンが入る
タイトルの通りなのですが、 左側サイドにタブメニューを設置しようとしているのですが、 IE6のみ、余計な改行のようなマージンが入ってしまいます。 色々と調べたのですが、どうしても解決できなかったので、お知恵をお貸しいただければと思います。 HTMLは以下のように書いています。 ＝＝＝＝ <div id="menu"> <ul id="navi-block"> <li><a href="#" onmouseover="MM_showHideLayers('p0','','show')" onmouseout="MM_showHideLayers('p0','','hide')">メニュー名</a> <div id="p0" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> <li><a href="#" onmouseover="MM_showHideLayers('p1','','show')" onmouseout="MM_showHideLayers('p1','','hide')">メニュー名</a> <div id="p1" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> </div> ＝＝＝＝ CSSは以下のように書いています。 ＝＝＝＝ #menu { width:218px; position:relative; z-index:2;} ul#navi-block {list-style:none;} ul#navi-block li a {display:block;width:175px; height:30px;margin:0;padding:0.75em 25px 0 20px;background: url(../images/marker_square_gray_navi.gif) right center no-repeat;border-top:#CCCCCC 1px solid;} div#p0 {left:220px; top:0;} div#p1 {left:220px; top:0;} .set { width:220px; position: absolute; visibility: hidden; z-index:3;} ＝＝＝＝
- ベストアンサー
- CSS
- プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 ●メニュー1-1 ●メニュー1-2 ●メニュー1-3 ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> <div class="tree_sub"> <ul> <li class="left">●メニュー1-1</li> <li>●メニュー1-2</li> </ul> <ul> <li class="left">●メニュー1-3</li> <li>●メニュー1-4</li> </ul> </div> </div> <div class="tree"> <a href="#">○メニュー2</a> </div> [css] div.tree { border-bottom:1px solid #000000; width:365px; } div.tree_sub ul li { float:left; } div.tree_sub ul li.left { width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
補足
ご回答ありがとうございます。 意味合いはあっているかと思いますが、どのように記述すればいいのかがいまいち理解できておりません。 idをclassに変えたりしても変わらないのでご教授いただけないでしょうか？