ページ読み込み時にタブ切り替え
回答ありがとうございます。
$(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が表示されております。
ご教授願いいたします^^;