• 締切済み

ページの上下に同じタブメニューを付けたい

現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。 ちなみに、 ヘッダーに↓の記述をし、 <script> <!-- jQuery( function() { jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () { var str = jQuery( 'input', this ) . val(); jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' ); jQuery( str ) . css( 'display', 'block' ); jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } ); jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } ); } ) . first() . click(); } ); // --> </script> cssに↓の記述をし、 #jquery-sample-tabs { width:750px; background:#F3F3F3; } #jquery-sample-tabs ul { background:#000; margin: 0; padding: 5px 5px; } #jquery-sample-tabs ul li { display: inline; margin: 1px; padding: 5px 20px; border: solid 1px #888888; border-radius: 5px 5px 0px 0px; background-color: #F3F3F3; cursor: pointer; } #jquery-sample-tabs div { padding: 10px 15px; } HTMLに↓の記述をしています。 <div id="jquery-sample-tabs" class="jquery-sample-tabs"> <ul> <li> <input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" /> タブ(1) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" /> タブ(2) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" /> タブ(3) </li> </ul> <div id="jquery-sample-tab-1-contents">(1)の内容</div> <div id="jquery-sample-tab-1-contents">(2)の内容</div> <div id="jquery-sample-tab-1-contents">(3)の内容</div> </div> よろしくお願いします。

画像を拡大する

みんなの回答

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

No.1です。 ご提示のソースと画像がどうも合っていないような… とりあえず、No.1の回答の具体例。原理的な部分のみです。。 角丸などの調整は適宜行なってください。 （全角空白は半角に） <!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"> <!-- body{ background-color:#fff; } ul.tabs, ul.tabs li{ 　list-style-type:none; 　margin:0; 　padding:0; } ul.tabs li{ 　padding:3px 20px; 　float:left; 　margin-right:2px; 　border:1px solid #999; 　background-color:#eee; 　cursor:pointer; } ul.tabs li.active{ color:#fff; background-color:#999; } div#panels{ clear:left; background-color:#999; } div.panel{ height:24em; } //--> </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ 　$("ul.tabs>li").click(function(){ 　　var num = $(this).parent().children("li").index(this); 　　$("ul.tabs").each(function(){ 　　　$(">li",this).removeClass("active").eq(num).addClass("active"); 　　}); 　　$("div#panels .panel").hide().eq(num).show(); 　}).first().click(); }); //--> </script> </head> <body> <ul class="tabs topTab"> <li>タブ(1)</li> <li>タブ(2)</li> <li>タブ(3)</li> </ul> <div id="panels"> <div class="panel">(1)の内容</div> <div class="panel">(2)の内容</div> <div class="panel">(3)の内容</div> </div> <ul class="tabs bottomTab"> <li>タブ(1)</li> <li>タブ(2)</li> <li>タブ(3)</li> </ul> </body> </html>

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

回答がないようですので… HTMLの後側に同じようなtabを設定してあげればよいでしょう。 ご提示のソースでは、ながいIDがたくさんふってありますが（笑）、IDがかぶつているので多分予定したようには動作しないのではないでしょうか。 スクリプトの処理で上下のタブにほぼ同じ処理をすることになるとおもいますが、jQueryを使うのなら同じセレクタで両方を処理できるようにしておいたほうが簡単だと思います。 また、わざわざ input type=hidden で表示パネルのIDを指定しているようですが、タブの数が増減したときに面倒な気がします。 基本的にタブと表示パネルとは順序が同じだと推測しますので、もしそうであるなら、IDは不要にすることができます。 具体的には、タブのULに class="tabs upper"、class="tabs under"などと設定しておいて、表示パネルのほうはその親要素に id="panels"などとしておくだけ。（名称は例です。タブは角丸や枠線の設定で、上下を区別する必要がありそうなので。） 処理としては、クリックされたLIの順番を取得し、その順のパネルを表示するとともにタブのLIに class="selected" を設定してあげるといった感じ。 li.selectedには、あらかじめCSSで色などを設定しておいてあげればよろしいかと思います。

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

関連するQ&A

  • タブメニューを上下に設置

    下記サイトを参考にタブメニューを作成しました。 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> どうぞ宜しくお願いいたします。

  • 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タブメニュー内、パネル間のリンク方法。

    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> 何卒宜しくお願い申し上げます。

  • jQuery タブとスライダーの併用

    jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>

  • 隙間をなくすには？

    タブメニュー式のＨＰをつくろうと思っています。 一番上にタブの画像を横一列に並べて、そのすぐ下にコンテンツを書くためのテーブル（？）を配置したいと思っています。 タブ画像を横に並べて、その下にテーブルを配置するまではうまくいったのですが、タブとテーブルに間に隙間があいてしまってどうしてもくっつけることができません。 下記がHTMLとCSSのソースなのですが、タブとテーブルをくっつけるにはどうしたらいいのでしょうか？ HTMLここから ----------------------------------------------------------------- <Html> <Head> <Title></Title> <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css"> </Head> <Body> <div> <ul> <li><Img Src="tab1-1.jpg"></li> <li><Img Src="tab2-1.jpg"></li> <li><Img Src="tab3-1.jpg"></li> <li><Img Src="tab4-1.jpg"></li> </ul> </div> <div class="box1">ここに内容を入れます。</div> </Body> </Html> CSSここから ----------------------------------------------------------- li {float:left;} .box1 { clear:both; border-top:solid 10px #ff3300; border-bottom:solid 1px #ff3300; border-left:solid 1px #ff3300; border-right:solid 1px #ff3300; } ul {margin:-0px;}

    • ベストアンサー
    • HTML
  • 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> どうぞ宜しくお願い致します。

  • １ページ内にタブボックスをたくさん設置

    下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定です このため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、 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>

  • カテゴリページ内　複数タブ

    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>

  • クリックしたら文章が入れ替わるjQuery

    クリックしたら文章が入れ替わるjQuery http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ 上記のサイトを参考につくっています。 タブではないのですが、添付画像のように数字部分を押すと中央部分の文章が入れ替わるというものです。 1と2の部分は押すと文章が入れ替わり、3を押すと違うページに飛ぶようにしようと思っています。 3のページにも同じ1～3のナビを置き、3から1、3から2にも飛ぶようにしたいのですが、このjsのままだと2を押しても1の内容が表示されてしまいます。 それを変更したいのと、 1か2がactiveの時に今どっちの内容を表示しているかわかるように色を変えたいのですが、変わりませんでした。 （サンプルだとちゃんとタブが切り替わっているようにみえるのでそのようにしたい。） 以下私のコードです。 ■■■■■■■■■■■■HTML■■■■■■■■■■■■ <div id="nav"> <ul> <li class="tabs"><a href="#1" >1</a></li> <li class="tabs"><a href="#2">2</a></li> <li><a href="3.html">3</a></li> </ul> </div> <div class="container"> <div id="1" class="content">　１の文章　</div> <div id="2" class="content">　２の文章　</div> </div> ■■■■■■■■■■■■js■■■■■■■■■■■■ $(document).ready(function() { $(".content").hide(); $("li.tabs:first").addClass("active").show(); $(".content:first").show(); //On Click Event $("li.tabs").click(function() { $("li.tabs").removeClass("active"); $(this).addClass("active"); $(".content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); ■■■■■■■■■■■■CSS■■■■■■■■■■■■ #nav li a{ color:#8D8D8D; text-shadow: 0px 0px 3px #fff; } #nav li a:hover{ color:#8D8D8D; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); } li.tabs active{ ←ここが変？ color:#8D8D8D; } ド素人の上説明も下手で申し訳ありませんが、よろしくお願いいたします。

  • １ページ内に　複数のタブボックスを設置

    １ページ内に　複数のタブボックスを設置するために、下記のようなコードを記載しました。 おそらく最後の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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する