質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

318閲覧

タブ切替えの中身を書き換えたいと思います。

kinokomochi

総合スコア23

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/07/20 08:35

編集2017/07/20 09:09

こんにちは。
タブの切替えを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> ```このように修正しました。よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/07/20 08:40

参考にされた記事のURLを記載ください。
kinokomochi

2017/07/20 08:49

記述し忘れていました…申し訳ありません。よろしくお願い致します。
guest

回答2

0

ベストアンサー

HTML書き換えと言っていますが、実際にはスタイル切り替えですね。
そのため、タブ内容が4つ用意された状態になっています。

JavaScript

1$('.content li').eq(index).css('display','block');

これは4つあるタブ内容のうち、クリックされた番号のものを表示します。タブが2個しかないので後ろの2個は表示されません。

JavaScript

1$('#tab_pc .content li').eq(index).css('display','block'); 2$('#tab_sp .content li').eq(index).css('display','block');

こうすれば一応、想定通りに動くようになると思います。

投稿2017/07/20 09:18

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kinokomochi

2017/07/21 05:23

回答ありがとうございます。 もしお手数でなければ、そのコードをどういった風にどこに記述すればいいのか教えて頂けると幸いです… 初心者で申し訳ないのですが、よろしくお願い致します。
x_x

2017/07/21 07:06

上のコードの代わりに下のコードにするということです。ウィンドウ幅については何も触れてませんので、kei344さんのを参考にしてください。
kinokomochi

2017/07/21 07:25

そういうことなんですね。理解が足りず申し訳ありません。 実際にやってみましたが、最初の読み込み時に内容が二つ出てしまいます… 何かおかしいのでしょうか…
kinokomochi

2017/07/21 07:40

すいません!chromeのデベロッパーツールでレスポンシブにして検証している時は作動しなかったのですが、ウィンドウサイズを実際に小さくしてみたらきちんと動きました。お騒がせしてしまいすいません… ありがとうございました。
x_x

2017/07/21 07:44

これはクリックしたときに動く部分なので、最初にどうあるべきかは別途記述しなければならないかと思います。わたしには最初にどのタブが選ばれているべきかわからないのですが、indexにタブ番号が入っていると思えば、もう書けるのではないでしょうか?
kinokomochi

2017/07/21 07:46

なるほど、ご丁寧にありがとうございます。 もう書けると思います! 長々とお付き合いいただきありがとうございました。
guest

0

ウィンドウ幅を動かしても判定してくれません。

【jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 | bl6.jp】
http://bl6.jp/web/javascript/change-process-get-window-size/

ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読み込み後にウィンドウサイズを変更しても変わりません。ちょっと微妙ですね。なのでresize()を使ってリアルタイムで現在のウィンドウサイズを取得していきます。

投稿2017/07/20 08:55

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kinokomochi

2017/07/20 09:00

回答ありがとうございます。 resizeをつけて動かしてみても動きませんでした… 何が悪いのでしょうか…
kei344

2017/07/20 09:02

修正したコードを質問文に「追記」してください。(決して元のコードを消さないでください)
kinokomochi

2017/07/20 09:09

はい。よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問