jQuery Tab 區塊切換

$(function(){
     // 預設顯示第一個 Tab
     var _showTab = 0;
     var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active');
     $('.show .text').hide();
     //$('.show .text').eq($defaultLi.index()).siblings().hide();
      
     // 當 li 頁籤被點擊時...
     // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
     $('ul.tabs li').mouseover(function() {
          // 找出 li 中的超連結 href(#id)
          var $this = $(this),
               _index = $this.index();
          // 把目前點擊到的 li 頁籤加上 .active
          // 並把兄弟元素中有 .active 的都移除 class
          $this.addClass('active').siblings('.active').removeClass('active');
          // 淡入相對應的內容並隱藏兄弟元素
          $('.hide li').eq(_index).stop(false, true).fadeIn().siblings().hide();
 
          return false;
     }).find('a').focus(function(){
          this.blur();
     });
});

<!--html-->
<div>      
<ul class="tabs">                    
  <li><div class="pic"><a href="javascript:;" target="_blank"><img src="images/01/logo_01.png" alt=""/></a></div></li>                        
  <li><div class="pic"><a href="javascript:;" target="_blank"><img src="images/01/logo_02.png" alt=""/></a></div></li>                        
  <li><div class="pic"><a href="javascript:;" target="_blank"><img src="images/01/logo_03.png" alt=""/></a></div></li>                        
  <li><div class="pic"><a href="javascript:;" target="_blank"><img src="images/01/logo_04.png" alt=""/></a></div></li>                        
</ul>
</div>
 
<div class="show">
  <div class="text" id="hide_text_1"> show 1 </div>
  <div class="text" id="hide_text_2"> show 2 </div>
  <div class="text" id="hide_text_3"> show 3 </div>
  <div class="text" id="hide_text_4"> show 4 </div>
</div>