• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:カテゴリページ内 複数タブ)

カテゴリページ内 複数タブの作り方

fujillinの回答

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

こんにちは > while文のなかで番号に連番を振るやり方がわかりません って、ご提示のスクリプトにはwhile文がはありませんけど・・・? 普通に番号付けしたいのなら、こんな感じ? var start = 1; var end = 10; var data = [], i = start; while(i<=end){  data.push("連番:" + (i++)); } alert(data.join("\n"));

関連するQ&A

  • jQueryを使用したタブの改造

    jQueryの知識が殆どないので教えてください。 以下のページで公開されているタブを改造して利用したいと考えています。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ ▼スクリプト部分 $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); ▼HTML部分 <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> </div> <div id="tab2" class="tab_content"> <!--Content--> </div> </div> タブをクリックして切り替えるというシンプルなスクリプトなのですが、 1、クリックではなくマウスオーバーでタブを切り替え。 2、アクティブなタブを判別するための要素(?)を「href」ではなく「name」に変更したいと考えています。 自分なりに調べて .click(function() ~の部分を .hover(function() に、 attr("href")の部分をattr("name")(+HTMLのhref部分も変更)に 変更することでほぼ理想通りの動作をするようになりました。 ただ、このコードの動作で少し問題が発生しています 1つはカーソルを素早く滑らせて切り替えを行うと、本来は隠れているべきアクティブなタブ以外のタブ要素が全て表示されることがあるという点。 2つはHTMLのname部分を「name="#tab1"」というHTML的にはおかしな記載をしないといけないという点です。できれば「name="tab1"」という記載の仕方で動作できればと思います。 解決方法があれば教えてくだささい。 よろしくお願いいたします。

  • Jquery タブで、4つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません! http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ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> まずこのままだ4つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか?

  • このjsを複数設定したい

    下記のjsを同ページ内に複数設定したいのですが、 どこかがバッティングしているようで、最後の記述文しか機能しません。 どうすれば、うまく両方とも機能するでしょうか? (function( $ ) { $.fn.basicTabs = function(options){ var settings = $.extend({ active_class1: "current1", list_class1: "tabs1", content_class1: "tab_content1", starting_tab1: 1 }, options ); var $content = $('.' + settings.content_class1); var $list = $('.' + settings.list_class1); $content.find('div').hide(); $content.find("div:nth-child(" + settings.starting_tab1 + ")").show(); $list.find("li:nth-child(" + settings.starting_tab1 + ")").addClass(settings.active_class1); $("." + settings.list_class1 + ' li a').click(function(e){ $list.find("li").removeClass(settings.active_class1); $("." + settings.content_class1 + " > div").hide(); $(this).parent().addClass(settings.active_class1); var currentTab1 = $(this).attr('href'); $(currentTab1).show(); e.preventDefault(); }); }; }( jQuery )); (function( $ ) { $.fn.basicTabs = function(options){ var settings = $.extend({ active_class2: "current2", list_class2: "tabs2", content_class2: "tab_content2", starting_tab2: 1 }, options ); var $content = $('.' + settings.content_class2); var $list = $('.' + settings.list_class2); $content.find('div').hide(); $content.find("div:nth-child(" + settings.starting_tab2 + ")").show(); $list.find("li:nth-child(" + settings.starting_tab2 + ")").addClass(settings.active_class2); $("." + settings.list_class2 + ' li a').click(function(e){ $list.find("li").removeClass(settings.active_class2); $("." + settings.content_class2 + " > div").hide(); $(this).parent().addClass(settings.active_class2); var currentTab2 = $(this).attr('href'); $(currentTab2).show(); e.preventDefault(); }); }; }( jQuery )); 上記のようにそれぞれ別に同ページ内で機能させたいです。 よろしくお願いします。

  • 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タブメニュー内へのリンク方法。

    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> どうぞ宜しくお願い致します。

  • クリックしたら文章が入れ替わる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"> 1の文章 </div> <div id="2" class="content"> 2の文章 </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; } ド素人の上説明も下手で申し訳ありませんが、よろしくお願いいたします。

  • タブ切り替えの初期表示について

    タブ切り替えの初期表示について、 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> ------------------------------------------------------ 初歩的な事かもしれませんが、どうぞよろしくお願いいたします。

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

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

  • 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">タブ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>タブ1内容</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>

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

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