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

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

ただいまの
回答率

90.76%

  • jQuery

    6338questions

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

【冗長なコードを簡略するコツを教えてください!】jQueryでタブ切替を実装中

解決済

回答 6

投稿 編集

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

yuyuuyu

score 1

前提・実現したいこと

プログラミング初心者です!
JSコードを簡略化させたい。
また簡略化するコツがあればおしえていただけると幸いです!

現在の状況

jQuery を使用して4つのタブ切り替えを行います。
タブを切り替えるごとにhoge0〜3のhtml要素が表示、非表示になる実装です。

該当のソースコード

$(function(){
    $('.js-hoge > li > a:eq(0)').on('click',function(){
        $('.js-hoge0').fadeIn();
        $('.hoge1, .hoge2, .hoge3').fadeOut();
    });

    $('.js-hoge > li > a:eq(1)').on('click',function(){
        $('.hoge1').fadeIn();
        $('.hoge0, .hoge2, .hoge3').fadeOut();
    });

    $('.js-hoge > li > a:eq(2)').on('click',function(){
        $('.hoge2').fadeIn();
        $('.hoge1, .hoge0, .hoge3').fadeOut();
    });

    $('.js-hoge > li > a:eq(3)').on('click',function(){
        $('.hoge3').fadeIn();
        $('.hoge0, .hoge1, .hoge2').fadeOut();
    });
});

html

    <nav class="mainMenu">
            <ul class="clearfix js-hoge">
                <li><a href="javascript:void(0)" </a>要素1</li>
                <li><a href="javascript:void(0)"</a>要素2</li>
                <li><a href="javascript:void(0)"</a>要素3</li>
                <li><a href="javascript:void(0)" </a>要素4</li>
            </ul>
        </nav>
      <div class="hoge0">要素1</div>
      <div class="hoge1">要素2</div>
      <div class="hoge2">要素3</div>
      <div class="hoge3">要素4</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • s8_chu

    2017/10/20 00:08

    HTMLを追記していただけませんか?

    キャンセル

  • yuyuuyu

    2017/10/20 00:17

    ありがとうございます!htmlを追記いたしました。

    キャンセル

回答 6

+3

$('.js-hoge > li > a:eq(3)')

このようなDOMへのアクセスはできますが、多用すると動作が遅くなる傾向にあるので注意が必要です。
最も負荷が少なく早いのはidによるアクセスです。

classとidをうまく使い分けることで以下のようなシンプルなコードが書けると思います。

<nav class="mainMenu">
  <ul class="clearfix js-hoge">
    <li><a href="#tab1" class="menu">要素1</a></li>
    <li><a href="#tab2" class="menu">要素2</a></li>
    <li><a href="#tab3" class="menu">要素3</a></li>
    <li><a href="#tab4" class="menu">要素4</a></li>
  </ul>
</nav>
<div id="tab1" class="tab">要素1</div>
<div id="tab2" class="tab">要素2</div>
<div id="tab3" class="tab">要素3</div>
<div id="tab4" class="tab">要素4</div>
.tab{
  display: none;/*すべて非表示*/
}
#tab1{
  display:block; /*最初のタブは表示とする(上書き)*/
}
$(function(){
  // メニュークラスクリックのイベント登録
  $('.menu').on('click', function(){
    $('.tab').hide(); // tab class をすべて非表示
    var id = $(this).attr('href'); // クリックしたDOMのhref要素を取得
    $(id).show(); // hrefの内容がidと一致するものを表示
  })
})

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+3

aタグの開始タグが終わっていないことと、終了タグがないことを修正したうえで、以下のように行うことができると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<nav class="mainMenu">
    <ul class="clearfix js-hoge">
        <li><a href="javascript:void(0)">要素1</a></li>
        <li><a href="javascript:void(0)">要素2</a></li>
        <li><a href="javascript:void(0)">要素3</a></li>
        <li><a href="javascript:void(0)">要素4</a></li>
    </ul>
</nav>
<div class="hoge0">要素1</div>
<div class="hoge1">要素2</div>
<div class="hoge2">要素3</div>
<div class="hoge3">要素4</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $(".js-hoge > li > a").on("click", function () {
            var i = $(".js-hoge > li").index($(this).parent());
            $(".hoge" + i).fadeIn();
            $("body div:not(.hoge" + i + ")").fadeOut();
        });
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

idやclassを利用せずに処理したいならdata-*でしょうね

$(function(){
  $('a[data-target]').on('click',function(){
    $('[data-self]').hide().filter('[data-self="'+$(this).data('target')+'"]').show();
  });
});
<nav class="mainMenu">
<ul class="clearfix js-hoge">
<li><a href="#" data-target="hoge0">要素1</a></li>
<li><a href="#" data-target="hoge1">要素2</a></li>
<li><a href="#" data-target="hoge2">要素3</a></li>
<li><a href="#" data-target="hoge3">要素4</a></li>
</ul>
</nav>
<div data-self="hoge0">要素1</div>
<div data-self="hoge1" style="display:none">要素2</div>
<div data-self="hoge2" style="display:none">要素3</div>
<div data-self="hoge3" style="display:none">要素4</div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+1

デザイナー側の問題でHTMLが触れない、などの制約があれば、こんな方法もあります。
一番シンプルなやつですね。

function fadeInOutAct(target, fadein, fadeout) {
    target.on('click', function () {
        fadein.fadeIn();
        fadeout.fadeOut();
    });
}

$(function () {
    fadeInOutAct('.js-hoge > li > a:eq(0)',
        '.js-hoge0',
        '.hoge1, .hoge2, .hoge3')
    fadeInOutAct('.js-hoge > li > a:eq(1)',
        '.js-hoge1',
        '.hoge0, .hoge2, .hoge3')
    fadeInOutAct('.js-hoge > li > a:eq(2)',
        '.js-hoge2',
        '.hoge1, .hoge0, .hoge3')
    fadeInOutAct('.js-hoge > li > a:eq(3)',
        '.js-hoge3',
        '.hoge0, .hoge1, .hoge2')
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

ネストがちょっと深くなっちゃったけど、
こんなアプローチはどうかな?

$(function(){
    [0, 1, 2, 3].forEach(function(it){
        $('.js-hoge > li > a:eq(' + it + ')').on('click',function(){
            $('.js-hoge' + it).fadeIn();
            var targets = [0, 1, 2, 3]
                .filter(function(target){return it !== target;})
                .map(function(target){return '.hoge' + target;})
                .join(', ');
            $(targets).fadeOut();
        });
    });
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

みなさま、ありがとうございました。

初心者なものでいろろ勉強させていただきました!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • jQuery

    6338questions

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