こんにちは。
タブの切替えをjqueryで行い、さらにそのタブの中身をウィンドウ幅によってまるごと書き換えたいという事をしたいと思っています。
タブの切り替えのコードをサイトからコピペさせていただき、htmlの書き換えもコピペさせていただきました。
その二つのコードを記述してみたのですが、あまりうまくいきません。
<ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> </ul> <div id="tab_pc"> <ul class="content"> <li>pcの時の中身</li> <li class="hide">pcの時の中身2</li> </ul> </div> <div id="tab_sp"> <ul class="content"> <li>spの時の中身</li> <li class="hide">spの時の中身2</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){//ウィンドウ幅判定 var w = $(window).width(); var x = 500; if (w <= x) { $('#tab_pc').addClass("invisible"); $('#tab_sp').removeClass("invisible"); } else { $('#tab_pc').removeClass("invisible"); $('#tab_sp').addClass("invisible"); } }); $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab li').index(this); //コンテンツを一度すべて非表示にし、 $('.content li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); </script>
HTMLの書き換えはdisplay:none
のcssが記述されているinvisible
というクラスを付与するjqueryで行っています。
ですがウィンドウ幅を動かしても判定してくれません。
何かおかしい部分ありましたら教えて頂けると幸いです。よろしくお願い致します。
##追記
追記依頼がありましたので追記させていただきます。
タブ切替えにて参考にさせていただいたサイト:誰でも出来る!プラグインを使わずにjQueryで実装するタブ切り替え機能!
HTML書き換えにて参考にさせていただいたサイト:jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方
以上になります。
記述し忘れてしまい、申し訳ありません。よろしくお願い致します。
##追記2
回答して頂いたことを元に、コードを修正しました。
<ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> </ul> <div id="tab_pc"> <ul class="content"> <li>pcの時の中身</li> <li class="hide">pcの時の中身2</li> </ul> </div> <div id="tab_sp"> <ul class="content"> <li>spの時の中身</li> <li class="hide">spの時の中身2</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(window).resize(function(){ var w = $(window).width(); var x = 500; if (w <= x) { $('#tab_pc').addClass("invisible"); $('#tab_sp').removeClass("invisible"); } else { $('#tab_pc').removeClass("invisible"); $('#tab_sp').addClass("invisible"); } }); $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab li').index(this); //コンテンツを一度すべて非表示にし、 $('.content li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); </script> ```このように修正しました。よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー