使用jQuery完成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡</title>

    <script src="jQuery/jquery-3.1.0.min.js"></script>

    <style>

        #menu{

            margin-top: 100px;

            margin-left: 200px;

            list-style: none;

            display: block;

            height: 50px;

        }

        #menu li{

            margin-top: -2%;

            list-style: none;

            float:left;

            height:50px;

            width:150px;

            line-height: 50px;

            background-color: #e5eaef;

            color: #3528fa;

            text-align: center;

            font-family: '微软雅黑';

        }

        #menu ul{

            display: none;

        }

        div{

            position: absolute;

            height: 150px;

            left:250px;

            display: none;

        }

        #menu li:hover{

            color: pink;

            background-color: #e7faf7;

            font-family: '微软雅黑';

        }

        .choosed{

            display: block;

        }

    </style>

</head>

<body>

<ul id="menu">

    <li>立秋<div ><img src="1.jpg"></div></li>

    <li>处暑<div><img src="2.jpg"></div></li>

    <li>秋分<div><img src="3.jpg"></div></li>

    <li>寒露<div><img src="4.jpg"></div></li>

</ul>

<script>

    $(document).ready(function() {

        $('#menu li').hover(function() {

                    $('div',this).slideDown(300);

                    $('div',this).addClass("choosed");},

        function() {

            $('div',this).slideUp(300);

            $('div',this).removeClass("choosed");})

    });

</script>

</body>

</html>

tab选项卡(选择上面的菜单,下面出现对应的不同的内容)的更多相关文章

  1. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  2. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. IE8“开发人员工具”使用详解上(各级菜单详解)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html IE8“开发人员工具”使用详解上(各 ...

  4. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  5. BootStrap实现左侧或右侧竖式tab选项卡

    BootStrap实现左侧或右侧竖式tab选项卡 代码如下: <div style="height: 100px;"> <div class="col- ...

  6. VC6下深入理解new[]和delete[]（在多线程下new和delete的时候，必须选择上多线程库，不然可能造成进程崩溃）

    多少年了,一直处于C与C++混用的状态,申请空间一直用malloc,释放空间一直用free,为什么?因为他们好理解易操作,就如同输出一直用printf而不用<<,输入一直用scanf而不用 ...

  7. js 淡入淡出的tab选项卡

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  8. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  9. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

随机推荐

  1. Openstack搭建相关问题

    1.Openstack添加新磁盘到根分区 初始化分区sdb为物理卷pv pvcreate /dev/sdb  //初始化 pvdisplay  //显示物理卷信息 vgextend centos /d ...

  2. java netty之ServerBootstrap的启动

    通过前面的几篇文章,对整个netty部分的架构已经运行原理都有了一定的了解,那么这篇文章来分析一个经常用到的类:ServerBootstrap,一般对于服务器端的编程它用到的都还算是比较的多..看一看 ...

  3. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  4. Java程序员从笨鸟到菜鸟之（五十一）细谈Hibernate（二）开发第一个hibernate基本详解

    在上篇博客中,我们介绍了<hibernate基本概念和体系结构>,也对hibernate框架有了一个初步的了解,本文我将向大家简单介绍Hibernate的核心API调用库,并讲解一下它的基 ...

  5. Cannot use object of type yii\db\Connection as array

    $pointLog = $conn->createCommand('select * from table1 where is_deleted = 0 AND id1 = :id1 AND id ...

  6. android opengl

    引用:http://weimingtom.iteye.com/blog/1616972 二维坐标系变换为原点在左上角(测试用) * GLES * JOGL * LWJGL * libgdx(使用g2d ...

  7. "未能找到类型或命名空间名称",引用dll的时候出错

    当前项目是.net2.0框架,引用的dll是 .net 4.5框架,引用后编译时报错“未能找到类型或命名空间名称”. 当前项目 右键-->应用程序-->目标框架 改为 .net frame ...

  8. iconfont-矢量图标字体的运用

    发现一个奇怪的现象:(http://m.muzhiwan.com) 这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的: 页面源代码如下: 好奇怪啊,这些个乱七八糟的&a ...

  9. 将B表的字段内容插入到A表字段中

    update hy_b_hacker as h , ( SELECT ( @rowNO := @rowNo +1 ) AS rowno, ip FROM ( SELECT * FROM hy_b_se ...

  10. TortoiseGit 连接每次都要输入用户名和密码

    当你配置好git后,在C:\Documents and Settings\Administrator\ 或者  C:\Users\Administrator 目录下有一个 .gitconfig 的文件 ...