使用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. kafka 命令行操作

    1.创建主题(topic) bin/kafka-topics.sh --create --zookeeper m6:2181 --replication-factor 1 --partitions 1 ...

  2. DNS协议

    DNS Message: Header   消息头部 Question    DNS请求 Answer  回答请求的资源记录(Resource Record(s)) Authority   指向域的资 ...

  3. 最长公共子序列（加强版） Hdu 1503 Advanced Fruits

    Advanced Fruits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. My roadway of compilers principles.

    龙书学习过程代码记录--Python3.5(毕竟第一遍看书,书里面的例子全用python写的) One 将中缀表达式翻译成后缀表达式↓ class Parser(object): def __init ...

  5. jquery一个按钮全选和反选

    1.jquery实现复选框全选和反选的方式有好几种,今天遇到一个问题,只用下边的方式生效:function checkAll(){ var check=$('#check_all').is(':che ...

  6. delphi TIdHTTP Post乱码问题

    这里主要说的是中文乱码的问题 1. 发过去的是乱码如下处理, 服务器采用的是UFT-8编码的情况下 uses  HTTPApp;      sPost := HTTPEncode(UTF8Encode ...

  7. 白话LINQ系列1---什么是LINQ？

    一.本系列目标 1.理解LINQ: 2.能写得复杂的LINQ语句(比如:动态查询): 3.理解表达式树及相关概念: 4.熟练运用LINQ写出优美的代码(希望一起努力,最终达到): 二.LINQ为何物? ...

  8. javaWeb 使用 filter 处理 html 标签问题

    1.web.xml代码 <filter> <filter-name>HtmlFilter</filter-name> <filter-class>de. ...

  9. 欲实施CRM软件，必须先懂什么是CRM软件

    CRM是Customer Relationship Management(客户关系管理)的缩写,它是利用信息科学技术,实现市场营销.销售.服务等活动自动化,使企业能更高效地为客户提供满意.周到的服务, ...

  10. WampServer中MySQL中文乱码解决

    1.修改mysql的my.ini文件: 在 [client] 下面增加 default-character-set=utf8 在 [mysqld] 下面增加: character_set_server ...