<?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字符串

    二.python字符串操作符 1. 对象标准类型操作符 Python对象的标准类型操作符一共就三种:对象值的比较.对象身份的比较.布尔类型.其中对象值的比较主要是大于.小于.不等于等的数学比较符:对象 ...

  2. CSS+DIV实现文字一行内显示，并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  3. MYSQL分页存储过程及事务处理--转自peace

    MYSQL的分页过程,和事务处理的一个测试过程. /* --名称:MYSQL版查询分页存储过程 by peace 2013-8-14 --输入参数:@fields -- 要查询的字段用逗号隔开 --输 ...

  4. 去除除服串中的某些字符，不用String内置方法

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class test { public static vo ...

  5. JQuery中如何动态修改input的type属性

    代码如下: jQuery(".member_id").focus(function() { jQuery(this).val(''); }).blur(function() { i ...

  6. android.view.InflateException: Binary XML file line #7: Error inflating class(OOM)

    由于页面含有ImageView引起的内存溢出. 作如下处理:在OnDestroy中 Drawable d = imageView.getDrawable(); if (d != null) d.set ...

  7. leetcode 237 Delete Node in a Linked List python

    题目: Write a function to delete a node (except the tail) in a singly linked list, given only access t ...

  8. Objective-C实现计算你写了多少行代码

    #import <Foundation/Foundation.h> NSInteger codeLineCount(NSString *path) { //1.获取文件管理者,这是一个单例 ...

  9. Listview注意事项

    1.缓存 @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder ho ...

  10. MYSQL 注释的 3 方法

    方法 1.单行注释 # 方法 2.单行注释 -- 方法 3.多行注释 /*------*/ ------------------------------------------------------ ...