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

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

ただいまの
回答率

90.86%

  • JavaScript

    14233questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5978questions

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

jqueryによる複数タブの開閉

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 157

mayeno26

score 5

<div id="switch1" class="switch">開閉スイッチ1</div>
<div id="area1" class="close">
コンテンツ1
</div>

<div id="switch2" class="switch">開閉スイッチ2</div>
<div id="area2" class="close">
コンテンツ2
</div>

<div id="switch3" class="switch">開閉スイッチ3</div>
<div id="area3" class="close">
コンテンツ3
</div>

このように開閉するコンテンツが複数あるとき、
下記のような条件での実装方法がわかりません。。

  1. 開閉スイッチを押すと、セットのコンテンツが開閉する。(switchとareaは番号が同じものがセット)
  2. あるareaが開いているときに、他のセットのスイッチを押すと、開いているareaは閉じて、スイッチを押したセットのareaが開く
  3. あるareaが開いているときに、スイッチ以外のエリアを押すと開いているareaが閉じる
  4. 開いているareaのswitchは背景色をかえる

下記試しました。(汚いソース。。ああ恥ずかしい。。)

.close {display:none;}
.open {display:block;}
.switch {background:#fff;}
.switch.active {background:#ddd;}
$(function() {
  $('.active').click(function(){
    $('#area1').removeClass("open");
    $('#area1').addClass("close");
    $('#area2').removeClass("open");
    $('#area2').addClass("close");
    $('#area3').removeClass("open");
    $('#area3').addClass("close");
    $(this).removeClass("active");
  });
});
$(function() {
  $('#switch1').click(function(){
    $('#area1').removeClass("close");
    $('#area1').addClass("open");
    $('#area2').removeClass("open");
    $('#area2').addClass("close");
    $('#area3').removeClass("open");
    $('#area3').addClass("close");
    $('#switch1').addClass("active");
    $('#switch2').removeClass("active");
    $('#switch3').removeClass("active");
  });
});
$(function() {
  $('#switch2').click(function(){
    $('#area1').removeClass("open");
    $('#area1').addClass("close");
    $('#area2').removeClass("close");
    $('#area2').addClass("open");
    $('#area3').removeClass("open");
    $('#area3').addClass("close");
    $('#switch1').removeClass("active");
    $('#switch2').addClass("active");
    $('#switch3').removeClass("active");
  });
});
$(function() {
  $('#switch3').click(function(){
    $('#area1').removeClass("open");
    $('#area1').addClass("close");
    $('#area2').removeClass("open");
    $('#area2').addClass("close");
    $('#area3').removeClass("close");
    $('#area3').addClass("open");
    $('#switch1').removeClass("active");
    $('#switch2').removeClass("active");
    $('#switch3').addClass("active");
  });
});

ヒントだけでもよいので、教えていただけると助かります。

よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Kosuke_Shibuya

    2018/04/27 00:23

    jQuery UI を利用しない理由は何かおありですか? http://jqueryui.com/tabs/

    キャンセル

  • mayeno26

    2018/04/27 01:06

    jQuery UI存じ上げませんでした。ちょっと試してみます。

    キャンセル

  • mts10806

    2018/04/27 09:39 編集

    一応、回答してみました。あくまで実装例なので、ヒントとして自身でも色々やってみてください。

    キャンセル

回答 3

checkベストアンサー

+2

クラスに対して指定すれば同じクラスを持っているもの全てに効くので、
それを利用すれば一気に解決すると思います。

「自身」はthisで取得できるので同列要素が列挙されてクラスを利用する場合は、
わざわざid指定でそれぞれclickを拾う必要はありません。

displayのnone⇔block の切り替えならクラスの付け外しだけではなくshow(),hide()
いっそtoggle()を使用しても良いかと。

not()を利用すれば「指定要素以外」という指定ができるので、覚えておくと結構使えます。

例えば下記のような感じです。

<div id="switch1" class="switch">開閉スイッチ1</div>
<div id="area1" class="contents">
コンテンツ1
</div>

<div id="switch2" class="switch">開閉スイッチ2</div>
<div id="area2" class="contents">
コンテンツ2
</div>

<div id="switch3" class="switch">開閉スイッチ3</div>
<div id="area3" class="contents">
コンテンツ3
</div>
$(function() {
    //初期は閉じておく
    $('.contents').hide();
    $('.switch').removeClass('active');

    $('.switch').on('click',function(){
        $('.switch').removeClass('active'); //全て背景色offに
        $('.contents').not($(this).next()).hide();//クリックした要素以外閉じる

        $(this).next('div.contents').toggle(); //クリックした要素の関連要素のみtoggle
        $(this).addClass('active'); //クリックした要素の背景色
    });
});

ただ、既に提示されているようにjQueryUIのtabs?だったと思いますが、その辺りを利用した方が楽なのは楽ですね。

追記:

$(function() {については$(document).ready(function() {の省略形のようなものなので、
何個も括らなくても1つにまとめても構いません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/27 10:41

    おおー簡略なコード。。!
    こちらを参考にうまく動くものができました。。
    ありがとうございました!大変助かりました。

    キャンセル

  • 2018/04/27 10:45

    解決できたようで何よりです。
    ただ、もっと簡潔に書けるようにも思うので、そこは挑戦してみてください。

    キャンセル

  • 2018/04/27 10:52

    教えていただいといて難ですが、言われてみれば重複する記述も多いですよね。
    ちょっと自分でも考えてみます。ありがとうございます。

    キャンセル

  • 2018/04/27 10:54

    重複については規模にもよるかもしれません。
    変数にするかどうかの判断と似ているところはあります。
    もう少し規模が大きければ一部は共通関数に切り出して、そちらを呼ぶだけというのもありですね。

    キャンセル

+2

あけたエリアを閉じなくてよいのでしょうか?
またareaをidで処理するのは非効率的なのでクラスを与えてあげるとよいでしょう

$(function(){
  $('.switch').on('click',function(){
    $('.switch').removeClass('active').next('.area').addClass('close');
    $(this).addClass('active').next('.area').removeClass('close');
  });
});
<div id="switch1" class="switch">開閉スイッチ1</div>
<div id="area1" class="close area">
コンテンツ1
</div>

<div id="switch2" class="switch">開閉スイッチ2</div>
<div id="area2" class="close area">
コンテンツ2
</div>

<div id="switch3" class="switch">開閉スイッチ3</div>
<div id="area3" class="close area">
コンテンツ3
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/27 10:46

    こちらの回答も参考にさせて頂きました。
    感謝感謝です。ありがとうございました。

    キャンセル

+1

とりあえず、$(function) はdomツリーロード後に一度だけ実行されるんで
元々あるswitchにはクリックが定義されるけど
動的に付与されるactiveには定義できない。
なのでlive使うか、active のadd,remove といっしょに定義、削除するかする

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/27 10:44

    なるほど。。DOMのローディングの仕組み、はじめて知りました。
    他の方のを参考に解決に至りましたが、大変勉強になりました。ありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    jsにてクリックイベント

    jQuery、もしくはJavaScriptで挙動を制御しようとしております。 やりたいこととしては、よくスマホゲーム等である画面のどこかしらをタップすると画面内の特定の要素が次、次

  • 解決済

    jQuery タブの切り替えでfadeの動きを付けたい

    マウスオーバーでタブの切り替えをしました。 マウスオーバーでコンテンツが切り替わる際にそのまま切り替わるのではなく fadein fadeoutの、ふわっとした動きを付けたいのです

  • 解決済

    IEでのモーダルウインドウ表示

    前提・実現したいこと Lightboxのようにギャラリーページの画像をクリックでモーダルウインドウ(説明文)を表示したいです。 発生している問題・エラーメッセージ どうしてもI

  • 解決済

    jQueryをクリックをイベントとした要素の表示非表示の連動について

    前提・実現したいこと jQueryを使ったクリック時のタブの表示の切り替えと別の要素の表示・非表示を連動させたい 実現したいことが分かりにくいとのご指摘をいただきましたので もう

  • 解決済

    jQueryでクラスを追加したのにクリックイベントが発生しない

    現状 現在box1のクラス名が付いたdivのみが一つあります。このdivをクリックするとbox1のクラス名が削除され、box2のクラス名が追加され、背景色が赤から緑に変更されます。

  • 解決済

    javascript classがうまく付与されない

    javascript初心者なためどうしても解決できず質問しました。 パララックス サイトを構築しておりました。 参考url http://histerian.net/pallax/

  • 解決済

    スクリプトが競合しているとこを教えてください

    スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。 何かが競合しているのでしょうか? 解決策をご教授お願いいたします。 <!doctype ht

  • 解決済

    jsでformの切り替え

    <!-- エリア1 --> <div class="form-area active"> フォームの内容 <button>確認画面</button> <!-- このボタンを押す

同じタグがついた質問を見る

  • JavaScript

    14233questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5978questions

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