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

$(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();
   }
  });
 });
});
<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>

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