<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .tab {
            width:100px;
            height:30px;
            float:left;
            background-color:green;
            color:white;
            margin:1px;
        }
        #dv {
            border:1px solid pink; 
            width:404px;
            height:100px;  
            background-color:aliceblue
                     
        }
    </style>
    <script src="jquery-1.7.1.min.js">

    </script>
    <script>
        $(function () {
            $('div.tab').mouseover(function () {
                $('#dv').text(this.innerText);
            });
        });
    </script>
</head>
<body>
    <div class="tab">标签1</div>
    <div class="tab">标签2</div>
    <div class="tab">标签3</div>
    <div class="tab">标签4</div>
    <div id="dv">content</div>
</body>
</html>

jquery 标签页的更多相关文章

  1. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  2. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  3. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  4. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  5. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  6. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  7. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  8. jQuery菜单，导航与标签页

    一:导航 网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果 一:下拉式菜单  法一: <!DOCTYPE html PUBLIC " ...

  9. 实战Jquery(四)--标签页效果

            这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...

随机推荐

  1. java生成6位随机数

    生成6位随机数(不会是5位或者7位,仅只有6位): System.out.println((int)((Math.random()*9+1)*100000)); 同理,生成5位随机数: System. ...

  2. [Angular Unit Testing] Testing Component methods

    import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserDynamicTestingModule ...

  3. NOIP 模拟 序列操作 - 无旋treap

    题意: 一开始有n个非负整数h[i],接下来会进行m次操作,第i次会给出一个数c[i],要求选出c[i]个大于0的数并将它们-1,问最多可以进行多少次? 分析: 首先一个显然的贪心就是每次都将最大的c ...

  4. 【hdu 2177】取(2堆)石子游戏

    Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  5. 行列式（determinant）的物理意义及性质

    1. 物理(几何)意义 detA=output areainput area 首选,矩阵代表的是线性变换(linear transformation).上式说明一个矩阵的行列式(detA)几何意义上, ...

  6. java中的方法返回值使用泛型，实现灵活的返回值类型

    痛点:      使用Mybatis框架的时候,想封装一个底层JDBC控制器,用于提供和Mybatis交互的增删改查接口(公用的接口),但由于公用的查询方法可能是用户自定义的任意一个和表对应的java ...

  7. reduce 阶段遍历对象添加到ArrayList中的问题

    起初遍历values时直接把对象添加到集合中,后来输出结果和预期不符,debug时发现添加到集合中的对象的值全部是最后一个对象的值,网上百度了下,发现是reduce阶段对象重用的问题,reduce阶段 ...

  8. Struts2——（7）拦截器组件

    AOP:面向切面编程(通过配置文件来指定作用到目标对象) OOP:面向对象编程 AOP具有很好的可插拔特性,很灵活. 可用于封装共通的业务处理,之后可以通过配置作用到Action组件上. 共通的业务处 ...

  9. PAT 1061 - 1064 题解

    这四道题来自 13 年 08 月 30 的 PAT 测试. 代码量不大,思路也比较直接.不过第一题的处理逻辑不太清晰,需要好好把握.稍有不慎就掉进坑里了(很多人被这道 20'的题坑了一个多小时心慌意乱 ...

  10. Variability aware wear leveling

    Techniques are presented that include determining, for data to be written to a nonvolatile memory, a ...