<!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. js进阶正则表达式8量词（+*？{}的意义用法）（量词的对象是前面一个字符）

    js进阶正则表达式8量词(+*?{}的意义用法)(量词的对象是前面一个字符) 一.总结 1.量词的对象是前面一个字符 量词 描述 n+ 匹配任何包含至少一个 n 的字符串. n* 匹配任何包含零个或多 ...

  2. Opencv Sift算子特征提取与匹配

    SIFT算法的过程实质是在不同尺度空间上查找特征点(关键点),用128维方向向量的方式对特征点进行描述,最后通过对比描述向量实现目标匹配. 概括起来主要有三大步骤: 1.提取关键点: 2.对关键点附加 ...

  3. 【u011】乘法难题

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 乘法难题是一种用一行的卡片来玩的单人游戏,每张卡片上有一个正整数.在游戏者从中拿出一卡片,并且得到一个 ...

  4. 海思hi3716c机顶盒接usb摄像头和usb无线耳机时，无线耳机有时没有声音

    两个USB设备各自是: A:USB摄像头带录音功能,但不带放音功能. B:USB无线耳机是使用USB转2.4G的无线耳机. 详细现象: 1, A,B两者同一时候插上机顶盒,并开机进入android,此 ...

  5. list数组归并去重

    C#两路list数组归并去重 个相同类型已排序数据进行合并,虽然list数组中有AddRange方法,但它只是把第二个数组从第一个数组末尾插入,假如两个数组有重复数据,保存进去.还有Union方法合并 ...

  6. Erlang游戏开发-协议

    Erlang游戏开发-协议 选择什么协议? 协议包含通讯协议和数据格式. 通讯协议 通讯协议目前常用的是:HTTP 和TCP .其有各自的特点根据游戏的特点而进行选择. HTTP HTTP比较成熟,使 ...

  7. Indexing Sensor Data

    In particular embodiments, a method includes, from an indexer in a sensor network, accessing a set o ...

  8. 科学的解决Http Token拦截器TokenInterceptor实现

    1.写在前面 在做项目的时候,有时对接口要求比较严谨.先介绍下情况. 我这边Http 方式采用的是 OKhttp+Retrofit 后台一共分为三种token,分别是实名token(accessTok ...

  9. gdal1.10编译经验

    作者:朱金灿 来源:http://blog.csdn.net/clever101 集成了一些扩展库,使用makefile编译,出现了一个链接错误: libcmt.lib(crt0.obj): erro ...

  10. VS2015编译环境下CUDA安装配置

    CUDA下载 CUDA是NVIDIA推出的通用并行计算架构,该架构使GPU能够解决复杂的计算问题,CUDA只支持NVIDIA自家的显卡,过旧的版本型号也不被支持. 下载地址:https://devel ...