jQuery tabs 開閉式タブについて
- jQueryを使用して開閉式のタブメニューを作成したい場合、slideToggleを使うと複数のメニューが同時に開いてしまう問題が起こることがあります。
- 解決策として、切り替えるメニュー以外のメニューを非表示にする方法があります。
- 具体的な実装方法として、ul.panel li:not(ul.tab li a.selectedのhref)を用いて非表示にした後、クリックしたメニューを表示するようにします。
- ベストアンサー
jQuery tabs 開閉式タブについて
jQuery tabsについて質問させてください。 知識不足です。。 やりたいこととしましては、複数タブメニューの開閉です。 メニュー１ クリックで⇒開く ⇒再度クリックで閉じる メニュー１開放時⇒メニュー２ クリック⇒メニュー２の内容に切り替わる⇒メニュー２再度クリックで閉じるといった内容です。 開閉だけなら collapsible: true で解決ですが、slideToggle のような効果も付けたい。 単一のメニューの場合は slideToggle で一発ですが、複数になったらうまくいかない???? メニューの内容が同時に開いたりしてしまい。。などなど試行錯誤で行き詰まりました。 色々参考にして最終的には以下のようなところにきましたが、メニューを閉じる事ができず どなたかjQueryマスターの方ご教授いただけますと幸いです。 説明下手ですいません。 何卒よろしくお願いいたします。 ※以下のスクリプトにこだわりはございません。 こんなの一発でこうだろという指摘ございましたら遠慮くなく指摘してくださいませ。 javascript ================ <script type="text/javascript"> $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected") $(this).addClass("selected") $("ul.panel li").slideUp("fast") $($(this).attr("href")).slideDown("fast") return false }); }) </script> ///////HTML////// <body> <ul class="tab"> <li><a href="#tabs-1">メニュー１</a></li> <li><a href="#tabs-2">メニュー２</a></li> <li><a href="#tabs-3">メニュー３</a></li> </ul> <ul class="panel"> <li id="tabs-1"></li> <li id="tabs-2"></li> <li id="tabs-3"></li> </ul> </body>
- zamurai8
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
少し違うかも… こんなのでは？ （って、判じ物じゃあるまいし…） jQuery(function($){ var openP; $("ul.panel>li").hide(); $("ul.tab>li>a").click(function(){ var p = $(this).attr("href"); $(openP).slideUp(); if(openP === p) openP = null; else $(openP = p).slideDown(); return false; }); }); （全角空白は半角に）
その他の回答 (1)
- ok-rjak
- ベストアンサー率52% (70/134)
マスターではないですが・・・ こういうことではないんですかね？ <ul class="tab"> <li><a href="#tabs-1">メニュー１</a></li> <li><a href="#tabs-2">メニュー２</a></li> <li><a href="#tabs-3">メニュー３</a></li> </ul> <ul class="panel"> <li id="tabs-1">aaa</li> <li id="tabs-2">bbb</li> <li id="tabs-3">ccc</li> </ul> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> ;(function($){ $('.panel li').hide(); $('.tab li a').click(function(){ $('.panel li').slideUp(); $($(this).attr('href')).slideDown(); return false; }); })(jQuery); </script>
お礼
早速のご教授誠にありがとうございます。 私のやり方がまずいのかやはり閉じる方がうまくいかず。。 コード自体は自ら複雑にしてしまっていることは気づきました。 キレイなコード勉強になりました。
関連するQ&A
- 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の 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>
- 締切済み
- 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
- 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"」という記載の仕方で動作できればと思います。 解決方法があれば教えてくだささい。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- 【jQuery基本質問】+（プラス）の使い方(2)
+(プラス)の使い方に関してルールを教えてほしいことがあります。 対象プログラムは、以下です。 $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() この("+$("ul.tab li a.selected").attr("href")+")")の中で、+を使う理由がわかりません。 文字結合だと思うのですが、+がないと、not("URL")のようにならないのでしょうか？ +がなくてもnot("URL")は成立するように思うのですが、、、。 +の使い方、基本ルールについておしえてくださいませ。
- 締切済み
- JavaScript
- 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>
- 締切済み
- JavaScript
- 開閉式メニューのhrefが効かない
お世話になります。 下記のようなソースでドロップダウンメニューを作って、 動作はしたのですが、肝心のメニューをクリックした時に該当するhtmlファイルに飛びません。 初歩的なことで申し訳ないのですが、サブメニュー内のaタグを動作させるには何か足りないものがあるでしょうか？ 教えていただければ助かります。 js <script type="text/javascript"> $(function(){ $("#header-bn").click(function(){ $("#backnumbers").slideToggle(); return false; }); }); </script> HTML <ul> <li>メニュー1</li> <li>メニュー2</li> <li id="header-bn"><a href="september.html">メニュー3</a> <ul id="backnumbers"> <li><a href="8.html">8</a></li> <li><a href="7.html">7</a></li> </ul> </li> </ul> おそらくはhead内に記述したreturn false;の記述で aタグのhref要素が無効にされてしまうと思うのですが、 jsには詳しくなく、単純に削ってしまうと開閉メニューが 機能しなくなるので、これをどう書き換えたらリンクが機能する 開閉式メニューが作れるかお知恵を頂ければ助かります。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryのslideToggleについて
jQueryのslideToggleについて質問です。 クリックするとドロップダウンメニューが表示されるとこまではOKです。 「メニュー1」のサブメニューが開いている状態で「メニュー2」をクリックすると ・既に開いている「メニュー1」のサブメニューが閉じる ・クリックされた「メニュー2」のサブメニューが開く としたいのですがどうすればいいのでしょうか？ ■html <nav id="global-nav"> <ul> <li><a href="#">ホーム</a></li> <li> <a class="sub" href="#">メニュー1</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li> <a class="sub" href="#">メニュー2</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">メニュー3</a></li> </ul> </nav> ■js $('a.sub').click(function(){ $('#global-nav li ul').hide();//←既に開いている場合は他を閉じる $(this).next('ul').slideToggle('slow'); return false; }); jsの2行目を入れることで他のサブメニューが開いている場合の問題はクリアできたのですが「メニュー1」をクリックするたびにサブメニューが開くだけで閉じることがありません^^;
- ベストアンサー
- JavaScript
- 前後の「＋」の意味は？
タブパネルを作成する以下のコードで分からない個所があります。 実際のページは→（http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/04/v2/sample2.html） $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("ul.panel li").hide(); $($(this).attr("href")).show(); return false; }); }); 分からないのは２行目の ("+$("ul.tab li a.selected").attr("href")+") です。 ＋（プラス）が前後に付いていますが、これがどういう意味なのか分かりません・・・ どうかご指南お願いいたします！
- ベストアンサー
- AJAX
お礼
ご教授誠にありがとうございます。 ザックリうまくいきました！！！ if文大変勉強になりました。 さらなる精進いたします。 本当に感謝感謝です。 重ねて御礼申し上げます。