使用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. [SLAM]2D激光扫描匹配方法

    1.Beam Model 2.Likehood field for k=1:size(zt,1) if zt(k,2)>0 d = -grid_dim/2; else d = grid_dim/ ...

  2. Nginx基础整理

    目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Nginx的主要企业功能 Nginx作为web服务器的主要应用场景包括: Nginx的安装 安装环境 快速安装命令集合 各个 ...

  3. iOS,XMPP本地环境搭建和框架使用

    1.XMPP的MySQL和openfire环境配置 2.XmppFramework框架导入和介绍 XMPP的MySQL和openfire环境配置 1.下载mysql安装 mysql下载 打开MySQL ...

  4. ubuntu 15.04 联网提示:wifi已通过硬件开关禁用

    执行以下命令: echo "options asus_nb_wmi wapf=4"| sudo tee /etc/modprobe.d/asus_nb_wmi.conf 重启

  5. 25条提高iOS app性能的方法和技巧

    以下这些技巧分为三个不同那个的级别---基础,中级,高级. 基础 这些技巧你要总是想着实现在你开发的App中. 1. 用ARC去管理内存(Use ARC to Manage Memory) 2.适当的 ...

  6. innodb数据结构

    Jeremy Cole on InnoDB architecture : Efficiently traversing InnoDB B+Trees with the page directory   ...

  7. C#:涉及DPI的高分辨率下的显示问题

    一.背景 在PC机上显示正常,在高分辨率下的Pad上,显示出现问题: 1.显示在屏幕最右端的窗体(控件)显示不出来: 2.截图时,被截图的界面字体文字变大,界面因此显示不全. 二.解决方法: 方法一: ...

  8. 卸载cygwin

    1.下载takeown.exe(貌似win自带,你可以打开cmd 输入takeown.exe查看,貌似不行)所以还是去网上下载吧,亲测http://download.csdn.net/download ...

  9. 【Linux命令与工具】系统资源查看——free、uname、dmesg以及netstat

    free:查看内存的使用情况 用法: free [-b|-k|-m|-g] [-t] 参数: -b: 直接输入free时,显示的单位是KB我们可以使用b(bytes), m(MB), k(KB), g ...

  10. [Scrapy] Mac安装Scrapy

    Mac安装Scrapy Mac版本 10.11 El Captain. 前一段想在Mac上用Scrapy,各种问题.有一个不错的工具:Anaconda. 安装Anaconda 下载地址 我还是下pyt ...