欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-15 17:17:04
效果截图 HTML结构为: JS代码为: ......

效果截图

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;
    });
});