以之前的选项卡例子为原版，当选上某一个选项卡的时候，选项卡周围会有一个蓝色的边框影响视觉体验，那么应该怎么去掉这个边框色呢？只需要加一行blur()--失去焦点函数就可以了

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		.btns{

			width:500px;

			height:50px;

		}

		.btns input{

			width:100px;

			height:50px;

			background-color:#ddd;

			color:#666;

			border:0px;

		}

		.btns input.cur{

			background-color:gold;

		}

		.contents div{

			width:500px;

			height:300px;

			background-color: gold;

			display:none;

			line-height:300px;

			text-align:center;

		}

		.contents div.active{

			display: block;

		}

	</style>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			$('#btns input').click(function() {

				$(this).blur(); //注意blur()的用法，加上这个就没边框色了

				// this是原生的对象

				$(this).addClass('cur').siblings().removeClass('cur');

				//$(this).index() 获取当前按钮所在层级范围的索引值

				$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');

			});

		})

	</script>

</head>

<body>

	<div class="btns" id="btns">

		<input type="button" value="tab01" class="cur">

		<input type="button" value="tab02">

		<input type="button" value="tab03">

	</div>

	<div class="contents" id="contents">

		<div class="active">tab文字内容一</div>

		<div>tab文字内容二</div>

		<div>tab文字内容三</div>

	</div>

</body>

</html>

　　

二. input框事件

有三个关于焦点的事件函数常用于input框中，分别如下

blur() 元素失去焦点

focus() 元素获得焦点

change() 表单元素的值发生变化

例子如下，用一个简单的input框做实验，并且测试了keyup()

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			//$('#txt01').focus();  这里的意义是一开始就获得光标

			// 获取焦点的时候-也就是鼠标点input框会有光标出现，这里测试用弹出foucus框

			$('#txt01').focus(function() {

				//alert('foucus');

			});

			// 失去焦点-就是鼠标点击input框之外时，失去光标的情况。测试用弹出blur

			$('#txt01').blur(function() {

				//alert('blur');

			});

			/*

			输入框内的内容发生变化，并且失去焦点后触发

			也就是input框里输入内容后，并且点击input框之外的地方后会弹出change框，然后还会弹出上面的blur框

			*/

			$('#txt01').change(function() {

				alert('change');

			});

			//按键松开后就触发，也就是输入inpu中的内容松开键盘的时候就会弹出内容

            //触发频率太高，每输入一个字母就会弹出框

			/*

			$('#txt01').keyup(function() {

				alert('keyup');

			});

			*/

		})

	</script>

</head>

<body>

	<input type="text" name="" id="txt01">

</body>

</html>

　　

jquery事件二 -- 选项卡，失去焦点的更多相关文章

  1. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  2. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  3. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  4. 第79天：jQuery事件总结（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件——hove ...

  5. 彻底弄懂jQuery事件原理二

    上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类 \ 先放个图, ...

  6. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  7. Jquery 学习二

    一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序   jQuery代码中的事件绑定方式: jQuery对 ...

  8. 一大波jQuery事件即将来袭！

    一.jQuery事件 1.focus()元素获得焦点 2.blur()元素失去焦点 3.change() 表单元素的值发生变化(可用于验证用户名是否存在) 4.click() 鼠标单击 5.dbcli ...

  9. 【Python全栈-JavaScript】jQuery事件

    jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...

随机推荐

  1. Android开发实战之简单音乐播放器

    最近开始学习音频相关.所以,很想自己做一个音乐播放器,于是,花了一天学习,将播放器的基本功能实现了出来.我觉得学习知识点还是蛮多的,所以写篇博客总结一下关于一个音乐播放器实现的逻辑.希望这篇博文对你的 ...

  2. JSP的原理、JSP的执行过程

    Jsp的本质是servlet, 通过response的printWriter返回,response的getOutputStream只能调用一次,返回流就不能返回页面刷新. JSP起源 在很多动态网页中 ...

  3. 150. Evaluate Reverse Polish Notation (Stack)

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  4. 路飞项目背景,contentType以及django缓存

    昨日回顾: 分页器: 普通分页 # 普通分页 from rest_framework.pagination import PageNumberPagination -每页的大小(默认) -查询的时候, ...

  5. mac安装mysql及终端操作mysql与pycharm的数据库可视化

    一.Mac安装mysql 首先下载mysql,地址:https://dev.mysql.com/downloads/mysql/ 然后已知安装就好了,会出现让你记住密码的提示,然后就安装好了.... ...

  6. CodeForces 540C Ice Cave (BFS)

    题意:给定 n * m的矩阵,让你并给定初始坐标和末坐标,你只能走'.',并且走过的'.'都会变成'X',然后问你能不能在末坐标是'X'的时候走进去. 析:这个题,在比赛时就是没做出来,其实是一个水题 ...

  7. CodeForces 474A Keyboard (水题）

    题意:给定一个键盘,然后一行字母,和一个字符,代表把那一行字母在键盘上左移还是右移一位. 析:没什么好说的,直接暴力就好. 代码如下: #include<bits/stdc++.h> us ...

  8. Discuz核心函数的解析

    dz采用的是多入口的方式,在每个入口函数你能看到引用,启动核心类的语句(其余省略),如下: require './source/class/class_core.php'; C::app()-> ...

  9. 设计模式23：Visitor 访问者模式（行为型模式）

    Visitor 访问者模式(行为型模式) 动机(Motivation)在软件构造过程中,由于需求的改变,某些类层次结构中常常需要增加新的行为(方法),如果直接在基类中做这样的修改,将会给子类带来繁重的 ...

  10. mybatis SqlMapConfig.xml

    一.SqlMapConfig.xml 1.属性properties 在入门时,以抽取出连接数据库的属性得到properties文件. a．可以通过resource和url来获得属性. b.proper ...