タブ切り替えで、最初はコンテンツ内を非表示にしたい

Question

タブ切り替えのjavascriptを実装していますが、このコードだと最初は#tab1にクラス.selectが付与され、コンテンツ１が表示されてしまいます。切り替わりに関しては希望の動きをしてくれています。
CSSは.hideにdisplay:noneをしています。

最初はタブの選択なしで、コンテンツも非表示にしたいのですが、どうすれば良いかご教授いただけないでしょうか。
よろしくお願い致します。

<ul class="tab_area">
    <li id="tab1">コンテンツ１を表示するタブ</li>
    <li id="tab2">コンテンツ２を表示するタブ</li>
    <li id="tab3">コンテンツ３を表示するタブ</li>
</ul>

<div class="content_area hide">
<ul>
<li>コンテンツ１を表示</li>
<li>コンテンツ2を表示</li>
<li>コンテンツ3を表示</li>
</ul>
</div>

jQuery(function($){
     $('ul.tab_area li').click(function() {
          var index = $('ul.tab_area li').index(this);
          $('.content_area').css('display','none');
          $('.content_area').eq(index).fadeIn();
          $('.tab_area li').removeClass('select');
          $(this).addClass('select')
     });
});

jQuery(function($){
        var hash = location.hash;   
        hash = (hash.match(/^#tab\d+$/) || [])[0];  
     if($(hash).length){
        var tabname = hash.slice(1);
     } else{
     var tabname = "tab1";}
        $('.content_area').css('display','none');
        $('.tab_area li').removeClass('select');
        var tabno = $('ul.tab_area li#' + tabname).index();
        $('.content_area').eq(tabno).fadeIn();
        $('ul.tab_area li').eq(tabno).addClass('select')
       });

Answer 1

メニューとコンテンツの相対位置で調整するなら

$(function(){
  $('.content_area li').hide();
  $('.tab_area li').on('click',function(){
    var idx=$('.tab_area li').index(this);
    $('.content_area li').hide().eq(idx).show();
  });
});

Comments

[yambejp]

ちなみにhideクラスとかは使わないほうがいい
（hideクラスの中の特定のliを表示とか面倒なので）

<ul class="tab_area">
<li>コンテンツ１を表示するタブ</li>
<li>コンテンツ２を表示するタブ</li>
<li>コンテンツ３を表示するタブ</li>
</ul>

<div class="content_area">
<ul>
<li>コンテンツ1を表示</li>
<li>コンテンツ2を表示</li>
<li>コンテンツ3を表示</li>
</ul>
</div>

[heyhey...]

スマートなコードになった上に、希望の表示となりました。できればselectクラスは付与したかったのですが、、解決済みにしてしまったので自力でなんとかしてみます。