使用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. 如何保证App外包的最终质量，不延期不烂尾？

    选择App外包服务的客户,最害怕的就是App项目延期甚至烂尾.投入了巨大的时间和财富,结果最后App无法上线. 解决这个问题有两个方法:第一,在选择公司前,先了解清楚有关App外包的一切问题,做到心里 ...

  2. throttle在程序中的作用

    throttle http://www.iciba.com/throttle N-COUNT (汽车.飞机的)节流阀,油门杆,油门踏板 The throttle of a motor vehicle ...

  3. C语言 str2bin 和 bin2str 实现

    需求介绍 在编码或者调试过程中经常需要进行 字节码转换为 十六进制的字符串, 或者将 十六进制字符串 转换为 字节码的需求. 即:  字节码 (内存中存储的 01 串):    11111111 &l ...

  4. [Android Tips] 14. Using Proguard with Android without obfuscation

    Option -dontobfuscate REF Using Proguard with Android without obfuscation

  5. linux的命令

    Linux命令的分类 选项及参数的含义 以"-"引导短格式选项的(单个字符),例如"-l" 以"--"引导长格式选项(多个字符),例如&qu ...

  6. url.py中的配置问题

    urlpatterns = [    url(r'^add$', calc_views.add, name='add'),      url(r'^admin/', admin.site.urls), ...

  7. JS创建对象总结

    javascript创建对象的方法总结 Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joe ...

  8. 。。。珍惜生命，远离Eclipse。。。

    今天上午就这么过去了,我的人生中有这样一个半天,献给了一个叫做Eclipse的家伙!!!今天是周末,我本应该休息的,但是又犯贱了!!!我竟然主动要加班!!!本来是个很不错心情,现在很不开心!早上来做了 ...

  9. 数据库中 dbo是什么意思

    亲当你在用sql 自动生成查询等sql 语句的时候 还记得 from 后边那一大串嘛 比如 [IWMS].[DBO].[CARTON] 一直我都对这个东西懵懵懂懂的 最近一直在学习存储过程,正好想起来 ...

  10. POJ - 1666 Candy Sharing Game

    这道题只要英语单词都认得,阅读没有问题,就做得出来. POJ - 1666 Candy Sharing Game Time Limit: 1000MS Memory Limit: 10000KB 64 ...