使用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. java 向上转型 向下转型

    //父类 四边形 class Quadrangle{ public static void draw (Quadrangle q){ } } //子类  public class Parallelog ...

  2. Linux解决Device eth0 does not seem to be present

    ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting down loopback insterface:  ...

  3. DNS协议

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

  4. Leetcode: Longest Repeating Character Replacement && G 面经

    Given a string that consists of only uppercase English letters, you can replace any letter in the st ...

  5. Pyhton 学习总结 21 ：fileinput模块

    fileinput模块可以对一个或多个文件中的内容进行迭代.遍历等操作.该模块的input()函数有点类似文件readlines()方法,区别在于前者是一个迭代对象,需要用for循环迭代,后者是一次性 ...

  6. JSP知识体系大全

    Jsp动态网页 Web页面之间有3种关系: 包含  请求转发  重定向 l Jsp的运行原理:(3个) Jsp页面不能直接运行 1.容器调用jsp引擎编译jsp文件  成一个java文本(Servle ...

  7. android studio 引入第三方类库jar包

    第三方类库jar包 这就简单多了,直接将jar包拷贝到app/libs下,然后在app下的build.gradle中添加此jar的依赖.如下: dependencies { compile 'com. ...

  8. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  9. 欧姆龙PLC以太网FINSTCP通信例程与操作步骤

    http://wenku.baidu.com/link?url=aa8kvtCg1eYp-wkIZY_hDpE5IuENT21Uvk1zVNtFiIyPTk-kjfarzSVyGt2DPs4ikXLT ...

  10. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...