ページ読み込み時にタブ切り替え


回答ありがとうございます。

[code]

    $(document).ready(function(){
     $('.tabs > .c').trigger('click');
    });
    
    $(function(){
     // タブをクリック時
     $('.tabs > div').click(function(){
      $('.tabs > div,.tab_content').removeClass('active');
    
      var tabClass = $(this).attr('class');
    
      $(this).addClass('active');
    
      $('.tab_content').each(function(){
          // indexOfだと、'a', 'b', 'c'の場合に常にtrueとなるため、classの最後のみ比較するように修正
       //if($(this).attr('class').indexOf(tabClass) != -1){
          if($(this).attr('class').split(' ')[1] === tabClass){
        $(this).addClass('active').fadeIn();
    
       }else{
        $(this).hide();
       }
      });
     });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <div class="tabs">
     <div class="a">タブ1</div>
     <div class="b">タブ2</div>
     <div class="c">タブ3</div>
     <div class="d">タブ4</div>
    </div>
    
    <div class="tab_content a active">
     <p>aaaaa</p>
    </div>
    
    <div class="tab_content b">
     <p>bbbbb</p>
    </div>
    
    <div class="tab_content c">
     <p>ccccc</p>
    </div>
    
    <div class="tab_content d">
     <p>ddddd</p>
    </div>
[/code]

上記教えていただいた通り実行しますと読み込み時、全てのtab_contentが表示されております。  
ご教授願いいたします^^;



[code]

    $(document).ready(function(){
        $('.tabs > .c').trigger('click');
    });
    
[/code]

と以下は同じ意味になります。

[code]

    $(function() {
      $('.tabs > .c').trigger('click');
    });
    
[/code]

また、ページ読み込み時に`click`するためには、`click`前にタブにイベントハンドラが設定されている必要があります。

そのため、以下のようにタブのイベントハンドラ設定後に、同じ`$(function(){`内でイベント発行すれば良いと思います。

[code]

    $(function(){
        // タブをクリック時のイベントハンドラ設定
        // ...省略...
    
      // タブのクリックイベントを発行
      $('.tabs > .c').trigger('click');
    });
    
[/code]

以下は、初回に'c'タブをクリックする場合の例になります。

[code]

    $(function(){
     // タブをクリック時のイベントハンドラ設定
     $('.tabs > div').click(function(){
      $('.tabs > div,.tab_content').removeClass('active');
    
      var tabClass = $(this).attr('class');
    
      $(this).addClass('active');
    
      $('.tab_content').each(function(){
          // indexOfだと、'a', 'b', 'c'の場合に常にtrueとなるため、classの最後のみ比較するように修正
       //if($(this).attr('class').indexOf(tabClass) != -1){
          if($(this).attr('class').split(' ')[1] === tabClass){
        $(this).addClass('active').fadeIn();
    
       }else{
        $(this).hide();
       }
      });
     });
      
      // タブのクリックイベントを発行
      $('.tabs > .c').trigger('click');
    });
[/code]

[code]

    .tabs > div {
      display: inline-block;
      padding: 0 0.5rem;
    }
    
    .tabs > .active {
      background-color: lightgreen;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <div class="tabs">
     <div class="a">タブ1</div>
     <div class="b">タブ2</div>
     <div class="c">タブ3</div>
     <div class="d">タブ4</div>
    </div>
    
    <div class="tab_content a active">
     <p>aaaaa</p>
    </div>
    
    <div class="tab_content b">
     <p>bbbbb</p>
    </div>
    
    <div class="tab_content c">
     <p>ccccc</p>
    </div>
    
    <div class="tab_content d">
     <p>ddddd</p>
    </div>
[/code]



[code]

    $(document).ready(function(){
        $('.tabs > .c').trigger('click');
    });
    
[/code]

と以下は同じ意味になります。

[code]

    $(function() {
      $('.tabs > .c').trigger('click');
    });
    
[/code]

また、ページ読み込み時に`click`するためには、`click`前にタブにイベントハンドラが設定されている必要があります。

そのため、以下のようにタブのイベントハンドラ設定後に、同じ`$(function(){`内でイベント発行すれば良いと思います。

[code]

    $(function(){
        // タブをクリック時のイベントハンドラ設定
        // ...省略...
    
      // タブのクリックイベントを発行
      $('.tabs > .c').trigger('click');
    });
    
[/code]

以下は、初回に'c'タブをクリックする場合の例になります。

[code]

    $(function(){
     // タブをクリック時のイベントハンドラ設定
     $('.tabs > div').click(function(){
      $('.tabs > div,.tab_content').removeClass('active');
    
      var tabClass = $(this).attr('class');
    
      $(this).addClass('active');
    
      $('.tab_content').each(function(){
          // indexOfだと、'a', 'b', 'c'の場合に常にtrueとなるため、classの最後のみ比較するように修正
       //if($(this).attr('class').indexOf(tabClass) != -1){
          if($(this).attr('class').split(' ')[1] === tabClass){
        $(this).addClass('active').fadeIn();
    
       }else{
        $(this).hide();
       }
      });
     });
      
      // タブのクリックイベントを発行
      $('.tabs > .c').trigger('click');
    });
[/code]

[code]

    .tabs > div {
      display: inline-block;
      padding: 0 0.5rem;
    }
    
    .tabs > .active {
      background-color: lightgreen;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <div class="tabs">
     <div class="a">タブ1</div>
     <div class="b">タブ2</div>
     <div class="c">タブ3</div>
     <div class="d">タブ4</div>
    </div>
    
    <div class="tab_content a active">
     <p>aaaaa</p>
    </div>
    
    <div class="tab_content b">
     <p>bbbbb</p>
    </div>
    
    <div class="tab_content c">
     <p>ccccc</p>
    </div>
    
    <div class="tab_content d">
     <p>ddddd</p>
    </div>
[/code]

