<?php

/*

 *

 * @Authors peng--jun

 * @Email   1098325951@qq.com

 * @Date    2015-11-28 09:26:54

 * @Link    http://www.cnblogs.com/xs-yqz/

 * @version $Id$

 ==========================================

 */

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<link href="" rel="stylesheet">

<style>

*{margin: ;padding: ;}

    .active{background-color: yellow;border: 1px solid red;}

    ul{list-style-type: none;position: relative;width: 800px;height: 50px;background-color: #ccc;line-height: 30px;}

    li{float: left;margin-right: 10px;width: 100px;height:50px }

    .title{background-color: #ccc;}

    .info{display: none;width: 500px;height: 300px;background-color: #;margin-top: 20px;}

    img{width: %;height: %;}

    p{position: relative;height: 30px;background-color: rgba(,,,0.4);line-height: 30px;top:-30px;display: none;color: #fff}

</style>

</head>

<body>

<ul>

    <li class="active"><img src="data:images/001.jpg" alt=""></li>

    <li><img src="data:images/002.jpg" alt=""></li>

    <li><img src="data:images/003.jpg" alt=""></li>

    <li><img src="data:images/004.jpg" alt=""></li>

</ul>

    <div class="info" style="display:block"><img src="data:images/001.jpg" alt=""><p></p></div>

    <div class="info"><img src="data:images/002.jpg" alt=""><p></p></div>

    <div class="info"><img src="data:images/003.jpg" alt=""><p>333lalalalal</p></div>

    <div class="info"><img src="data:images/004.jpg" alt=""><p></p></div>

    <script type="text/javascript">

/*    window.onload = function(){

        var aTitle = document.getElementsByTagName('li');

        var aInfo = document.getElementsByClassName('info');

        for (var i = 0; i < aTitle.length; i++) {

            aTitle[i].index = i;

            aTitle[i].onmouseover = function(){

                for (var i = 0; i < aTitle.length; i++) {

                    aTitle[i].className = '';

                    aInfo[i].style.display = 'none';

                };

                this.className = 'active';//this表示当前的事件；

                aInfo[this.index].style.display = 'block'; //

            }

        };

    }

*/

    $(function(){

        $("li").each(function(index){

            $(this).mouseover(function(){

                $("li").eq(index).addClass("active");

                $("li").eq(index).siblings("li").removeClass("active");

                $("div.info").eq(index).css({"display":"block"});

                $("div.info").eq(index).siblings("div.info").css({"display":"none"});

                $("p").eq(index).css({"display":"none"});

                $("p").eq(index).fadeIn("slow");

            }).mouseout(function(){

                /*$("p").eq(index).fadeOut();*/

            })

        });

    });

    </script>

</body>

</html>

jquery的选项卡事件的更多相关文章

  1. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  2. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  3. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  4. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  5. jquery on 绑定事件

    jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...

  6. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  7. jQuery原生框架-----------------事件

    jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if( ...

  8. ajax的status为201依然触发jquery的error事件的问题

    昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...

  9. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

随机推荐

  1. HDU 5793 - A Boring Question

    HDU 5793 - A Boring Question题意: 计算 ( ∑(0≤K1,K2...Km≤n )∏(1≤j<m) C[Kj, Kj+1]  ) % 1000000007=? (C[ ...

  2. Win7如何添加局域网内的网络打印机

    win+R或开始找到运行,在运行框中输入打印机所在的局域网内的IP地址. 这时会打开一个界面.如图 右键要选择的打印机.连接.这时会显示正在安装打印机驱动.如图 开始菜单->设备和打印机 找到刚 ...

  3. G - Reduced ID Numbers（第二季水）

    Description T. Chur teaches various groups of students at university U. Every U-student has a unique ...

  4. [Spring Boot Reference Guide] 读书笔记一 Getting Started

    8. Introducing Spring Boot Goals of spring boot: Provide a radically faster and widely accessible ge ...

  5. PLSQL实例（游标）

    在PLSQL块中执行SQL语句 A.   数据定义DDL: create,drop,truncate,不能直接执行,truncate执行时只做数据删除,不写日起,不维护索引 在PLSQL块中执行字符串 ...

  6. ecos3.0编译 if_lancepci.c:528: 错误： 赋值运算的左操作数必须是左值

    /home/xin/ecos3/ecos-3.0/packages/devs/eth/amd/lancepci/v3_0/src/if_lancepci.c:528: 错误: 赋值运算的左操作数必须是 ...

  7. 组合数（DFS）

    组合数 点我   描述 找出从自然数1.2.... .n(0<n<10)中任取r(0<r<=n)个数的所有组合.   输入 输入n.r. 输出 按特定顺序输出所有组合.特定顺序 ...

  8. 正式学习React( 三)

    最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周 ...

  9. Windows下Node.js开发环境搭建

    1.http://nodejs.org/下载node.js运行环境安装 2.打开DOS命令行 .安装express框架 1 >npm install express 末尾显示如下为安装成功 .安 ...

  10. Linux进程间通信——使用匿名管道

    在前面,介绍了一种进程间的通信方式:使用信号,我们创建通知事件,并通过它引起响应,但传递的信息只是一个信号值.这里将介绍另一种进程间通信的方式——匿名管道,通过它进程间可以交换更多有用的数据.   一 ...