【JS】最初からコンテンツが非表示のタブ切り替えの実装方法

<!--ここがタブ-->
	<ul class="tab">
			<li><a href="#tab1"><img src="https://placehold.jp/3d4070/ffffff/100x50.png?text=tab1" alt="tab1"></a></li>
			<li><a href="#tab2"><img src="https://placehold.jp/d92b45/ffffff/100x50.png?text=tab2" alt="tab2"></a></li>
			<li><a href="#tab3"><img src="https://placehold.jp/218a33/ffffff/100x50.png?text=tab3" alt="tab3"></a></li>
			<li><a href="#tab4"><img src="https://placehold.jp/e09626/ffffff/100x50.png?text=tab4" alt="tab4"></a></li>
	</ul>
	<!--ここが切り替わる部分-->
	<div class="content">
		<div class="area" id="tab1">
				Tab1テキストテキストテキストテキスト
		</div>
		<div class="area" id="tab2">
			 Tab2テキストテキストテキストテキスト
		</div>
		<div class="area" id="tab3">
				Tab3テキストテキストテキストテキスト
		</div>
		<div class="area" id="tab4">
				Tab4テキストテキストテキストテキスト
		</div>
	</div>

.tab, .tab li, .tab li a {
	float: left;
	padding:3px;
	margin-right:2px;
	list-style: none;
}
a:hover {
	opacity: 0.8;
}
.content {
	clear: both;
}
.area {
	display: none;
}

$(document).ready(function(){
		$('.contents').hide(); //初期では非表示
		$('.tab li').click(function() {
			if($(this).hasClass('active')){
				$('.area').hide();
				$($(this).find('a').attr('href')).fadeOut();
				$('.tab li').removeClass('active');
			}else{
				$('.tab li').removeClass('active');
				$('.area').hide();
				$($(this).find('a').attr('href')).fadeIn();
				$(this).addClass('active');
			}
		})
	});