<?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. 放大镜效果之js

    HTML代码: div.box>div#left+div#buttom+div#right div#left>img div#buttom>div.small>img CSS代 ...

  2. HttpClient---------demo

    public class aa { public static void main(String[] args) { // 创建HttpClient实例 HttpClient httpclient = ...

  3. Chapter 01：创建和销毁对象

    <一>考虑用静态工厂方法代替构造器 下面是Boolean类的一个简单示例: public final class Boolean implements java.io.Serializab ...

  4. png压缩工具-PngoutWin

          PngoutWin是一款聪明的png图片压缩工具,别的压缩工具压缩PNG是通过丢弃透明层来达到减肥的目的.可是不能透明的PNG还能叫PNG吗?PngoutWin它不会丢弃原本的透明,而是通 ...

  5. Android的线程和线程池

    ---恢复内容开始--- 一.Android线程的形态 (一)AsyncTask解析 AysncTask简介:①.实现上封装了Thread和Handler   ②.不适合进行特别耗时的后台任务 Ays ...

  6. C++ 包含头文件 和 宏的使用 和 条件编译

    1 #define命令剖析 1.1   #define的概念     #define命令是C语言中的一个宏定义命令,它用来将一个标识符定义为一个字符串,该标识符被称为宏名,被定义的字符串称为替换文本. ...

  7. 【MYSQL 清空所有的的表中的数据的SQL的生成】

    MYSQL 清空所有的的表中的数据的SQL的生成 select Concat('TRUNCATE TABLE ', TABLE_NAME, ';') from INFORMATION_SCHEMA.T ...

  8. LoadRunner 技巧之THML 与 URL两种录制模式分析

    Loadrunner的Virtual User Generator 提供人脚本的录制功能,对于初学者来说,这大大的降低了编写脚本的门槛,loadrunner提供两种录制脚本的方式:Html_based ...

  9. Opencv下图像对鼠标事件的响应

    直接上代码: //////////////////////////////////////////////////////////////////////// // // 该程序从文件中读入一幅图像, ...

  10. stl_map,set 用法

    set: 集合a,b加起来,去重 hdu 1406 #include <iostream> #include<cstdio> #include<set> using ...