当前位置：移动技术网 > IT编程>开发语言>Jquery > jquery html 鼠标悬浮出现列表切换

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

2019年02月19日 | 移动技术网IT编程 | 我要评论

效果截图

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

VScode中的react自动补全标签代码及黄色or红色警告

解决在vscode中react标签代码不提示的问题：1、作为一个刚开始的react小白，一定有vscode中标签... [阅读全文]
荐 jquery层次选择器

jquery层次选择器按照我个人的习惯，还是先放上总的内容，然后再开始一个一个攻克。常用的几种(概述)：1.派生... [阅读全文]
关于React处理input的方法和多个input共用一个方法（不用jQuery）

关于React处理input的方法和多个input共用一个方法（不用jQuery）前言：笔者目前是一家公司的前... [阅读全文]
Jquery绑定事件及动画效果

绑定事件bind（type，data，fuc）one(type,data,fuc) //只执行一次常见事件类型名... [阅读全文]
荐 jQuery文档阅读笔记自整理——1.6w字笔记

文章目录一、jQuery 基本用法1. 入口函数的写法2. jQuery 的冲突问题3. 核心函数4. 对象5.... [阅读全文]
荐 jQuery框架（四）：动画效果

文章目录1、显示、隐藏动画（1）显示（2）隐藏（3）实现点击按钮显示、隐藏盒子（4）开关式显示隐藏动画2、滑入、... [阅读全文]
jQuery操作DOM对象的方法

# jQuery操作DOM 和增删改查 - 1.html() ```js $('ul li&... [阅读全文]
jQuery的clone()方法和data()方法

# jQuery中的clone()和data()方法 - clone() ```js $('.demo').clon... [阅读全文]
jq使用jsonp实现百度搜索

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参; 什么是jsonp：就是利用<script>标签的src地址，让目标页面回... [阅读全文]
5.jQuery实现简单的on()和trigger()方法

# jQuery事件 - 1.on() ```js //1.事件类型type 2.selector 3.data... [阅读全文]

网友评论


验证码：

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

2019年02月19日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论