<?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. Python闭包及装饰器

    Python闭包 先看一个例子: def outer(x): def inner(y): return x+y return innder add = outer(8) print add(6) 我们 ...

  2. python运维开发(十四)----HTML基本操作

    内容目录: HTML概述 head标签 body中常用标签 css选择器 css常用属性 HTML HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言) ...

  3. .Net MVC4 加.html后缀报404问题

    一.配置方法: routes.MapRoute( name: "User_Default1", url: "user/{action}.html", defau ...

  4. 我所不知道的 Chrome 开发者工具

    http://www.oschina.net/translate/things-i-didnt-know-about-chrome-devtools 自打我开始进行Web开发后,我就一直将Firebu ...

  5. 映射 SQL 和 Java 类型

    http://alex2009.blog.51cto.com/749524/272942 AJAX: http://www.w3school.com.cn/jquery/ajax_ajax.asp h ...

  6. 定时PING下IP地址，检测该服务器是否还活着。 smokeping

    http://oss.oetiker.ch/smokeping-demo/?displaymode=n;start=2014-10-16%2007:00;end=now;target=SIP

  7. linux之SQL语句简明教程---主键,外来键

    主键 (Primary Key) 中的每一笔资料都是表格中的唯一值.换言之,它是用来独一无二地确认一个表格中的每一行资料.主键可以是原本资料内的一个栏位,或是一个人造栏位 (与原本资料没有关系的栏位) ...

  8. (译)linux系统关于命令echo的15个例子

    15 Practical Examples of ‘echo’ command in Linux By Avishek Kumar Under: Linux Commands On: August 2 ...

  9. wireshark 过滤条件汇总

    原文地址:http://blog.const.net.cn/a/9340.htm 一.针对wireshark最常用的自然是针对IP地址的过滤.其中有几种情况: (1)对源地址为192.168.0.1的 ...

  10. python 魔法方法之：__getitem__ __setitem__ __delitem__

    h2 { color: #fff; background-color: #7CCD7C; padding: 3px; margin: 10px 0px } h3 { color: #fff; back ...