<?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. VB.NET 结构（Structure）和类（Class）的区别

    类是我们用来构造 VB.NET 应用程序时的最基本的编程结构了. 那结构与类有什么相似之处与不同之处呢? 结构和类, 相同之处是都含有成员,包括构造函数.方法.属性.字段.常量.枚举和事件,都可以实现 ...

  2. oracle中的rowid和数据行的结构

    在oracle数据库系统中每一行都有一个rowid,oracle数据库系统就是利用rowid来定位数据行的.rowid也是oracle中内置的一个标量数据类型 rowid有一下特点; 是数据库中每一行 ...

  3. margin-top失效及解决办法

    现象:当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了 ...

  4. fltk demo

    背景: 基于microwindows nano-X上面运行fltk demo,是nano-X API 预留的fltk接口. 运行环境及程序版本: microwindows-0.89pre8 (源文件必 ...

  5. C# Chart 折线图 多条数据展示

    private void btn_Click(object sender, EventArgs e) { DBHelper db = new DBHelper(); DataSet ds = db.G ...

  6. Oracle EBS-SQL (PO-14):检查供应商信息sql

    select pvs.org_id, pvs.vendor_id, pvs.vendor_site_id, hou.name                                 经营组织, ...

  7. COB Epoxy灌膠時氣泡產生的原因與解決方法

    COB的黑膠 (Epoxy)有氣泡通常是不被允許的,因為外部氣孔不但會影響到外觀,內部氣孔更有可能會破壞 Wire bonding 的鋁線穩定度.既使在COB製程剛完成的時候沒有通過功能測試,也不代表 ...

  8. 切图教程，PS和AI切图方法分享

  9. mybatis数据库数据分页问题

    http://www.cnblogs.com/jcli/archive/2011/08/09/2132222.html 借花献佛,天天进步

  10. Unix/Linux环境C编程入门教程(34) 编程管理系统中的用户

    1.用户管理相关函数介绍 geteuid(取得有效的用户识别码) 相关函数 getuid,setreuid,setuid 表头文件 #include<unistd.h> #include& ...