jquery html 鼠标悬浮出现列表切换

效果截图

HTML结构为：

<div>
        <ul>
              <li style="MARGIN-RIGHT: 3px" >折扣专区</li>
              <li style="MARGIN-RIGHT: 3px" >团购推荐</li>
              <li >特卖推荐</li>
        </ul>
        <ul style="display: block;" >
               中间内容区
        </ul>
        <ul >
              中间内容区
        </ul>
        <ul >
              中间内容区
        </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;
    });
});

 

总结

以上是如意编程网为你收集整理的jquery html 鼠标悬浮出现列表切换的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。