SOURCE

$(function(){
  
    // 选项卡 鼠标经过切换
  $(".TAB li").mousemove(function(){
    var tab=$(this).parent(".TAB");
    var con=tab.attr("id");
    var on=tab.find("li").index(this);
    $(this).addClass('on').siblings(tab.find("li")).removeClass('on');
    $(con).eq(on).show().siblings(con).hide();
  });

      $('.TAB').each(function(index, el) {
        $(this).find("li").filter(':first').trigger('mousemove');
    });
  
      // 选项卡 鼠标点击

    $(".TAB_CLICK li").click(function() {
        var tab = $(this).parent(".TAB_CLICK");
        var con = tab.attr("id");
        var on = tab.find("li").index(this);
  			$(this).addClass('on').siblings(tab.find("li")).removeClass('on');
        $(con).eq(on).show().siblings(con).hide();
    });



    $('.TAB_CLICK').each(function(index, el) {
        $(this).find("li").filter(':first').trigger('click');
    });
  
})

 
<h2>鼠标经过切换</h2>
<ul class="TAB ul-tab" id=".tabcon1">
  <li><a href="javascript:;">新闻</a></li>
  <li><a href="javascript:;">案例</a></li>
  <li><a href="javascript:;">客户</a></li>
</ul>

<div class="tabcon1">新闻的内容</div>
<div class="tabcon1">案例的内容</div>
<div class="tabcon1">客户的内容</div>

<h2>鼠标点击切换</h2>

<ul class="TAB_CLICK ul-tab" id=".tabcon2">
  <li><a href="javascript:;">新闻</a></li>
  <li><a href="javascript:;">案例</a></li>
  <li><a href="javascript:;">客户</a></li>
</ul>

<div class="tabcon2">新闻的内容</div>
<div class="tabcon2">案例的内容</div>
<div class="tabcon2">客户的内容</div>

.ul-tab li.on a {color:red;}
.tabcon1 { display: none;}