jquery html 鼠標懸浮出現列表切換

效果截圖

HTML結構為：

<div class="activityBox">
        <ul class="activityTab">
              <li style="MARGIN-RIGHT: 3px" id="FlashSale" class="active">折扣專區</li>
              <li style="MARGIN-RIGHT: 3px" id="NewArrivals" class="">團購推薦</li>
              <li id="BeautyTuan" class="">特賣推薦</li>
        </ul>
        <ul style="display: block;" id="FlashSaleCenter" class="activityCenter">
               中間內容區
        </ul>
        <ul id="NewArrivalsCenter" class="activityCenter" style="display: none;">
              中間內容區
        </ul>
        <ul id="BeautyTuanCenter" class="activityCenter" style="display: none;">
              中間內容區
        </ul>
</div>

JS代碼為：

$(function(){
   //左右切換效果
   $(".activityTab li").live("hover",function(){
        $(".activityTab li").removeClass("active");
        $(this).addClass("active");
        $(".activityCenter").css("display","none");
        var activityTabID=$(this).attr("id");
        $("#"+activityTabID+"Center").show();
        return false;
    });
});