jquery的选项卡事件
<?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的选项卡事件的更多相关文章
- jQuery操作dom事件
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jquery on 绑定事件
jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- jQuery原生框架-----------------事件
jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if( ...
- ajax的status为201依然触发jquery的error事件的问题
昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
随机推荐
- MySTLString
auto ptr = new char[10]; delete ptr; delete 一个动态数组不能直接delete ptr, 应该是 delete[] ptr;
- (转)C/C++中static关键字
下面的转自http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777441.html 静态变量作用范围在一个文件内,程序开始时分配空间,结束 ...
- 【搜索引擎Jediael开发笔记】v0.1完整代码
详细代码请见 E:\Project\[重要]归档代码\SearchEngine归档代码 或 https://code.csdn.net/jediael_lu/jediael/tree/10991c83 ...
- 移动端-弹窗demo
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...
- Font Awesome 4.0.3 字体图标完美兼容IE7
1.下载Font Awesome 4.0.3兼容包,http://www.thinkcmf.com/index.php?m=font 2.解压,并放到自己网站系统合适的位置(如果你的站已使用Font ...
- dict.get('key')和dict['key']的区别
dict['key']只能获取存在的值,如果不存在会触发KeyError dict.get('key', default=None)如果不存在,返回一个默认值
- 数据库sqlite的使用
#import <Foundation/Foundation.h> @class student; @interface DataBaseHandle : NSObject //设置单例 ...
- SQL Server 对表的 12 种一般性操作
01. 创建 create table Strings(ID int); go 02. 为表添加列 alter table Strings add String nvarchar(32); ...
- bug fix: openstack can not run swift for pyeclib and liberasurecode do not match
最近在使用devstack 安装openstack nimble项目. nimble项目是一个专业的baremetal管理项目. 安装过程中,遇到这个问题. /opt/stack/swift/bin/ ...
- CSS 定位 (Positioning)学习
最近被css的定位要搞疯了...下面我总结一下最近学习东西. 先介绍几个概念: 块框:div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”. 行内框:与之相反,sp ...