以之前的选项卡例子为原版，当选上某一个选项卡的时候，选项卡周围会有一个蓝色的边框影响视觉体验，那么应该怎么去掉这个边框色呢？只需要加一行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. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  2. Alpha混合

    ShaderLab syntax: Blending 混合 Blending is used to make transparent objects. 混合是用来制作透明物体的. When graph ...

  3. strtotime()

    date('Y-m-d H:i:s',time()) //24小时 date('Y-m-d h:i:s',time()) //12小时

  4. [Jenkins] 执行SoapUI的task，设置邮件内容为HTML+CSS

    设置邮件内容:Default Content <span style="font-family:verdana;font-size:16px;color:black;font-weig ...

  5. 案例研究：手机APP的UI设计流程

    以下内容由Mockplus(http://www.mockplus.cn)团队翻译整理,仅供学习交流. UI设计——不仅仅是创造漂亮的图像. 面临的挑战 我为自己提供了一个绝佳的机会来训练我的视觉设计 ...

  6. Redis初学笔记

    1.官网概述 Redis is an open source (BSD licensed), in-memory data structure store, used as database, cac ...

  7. ETC系统简介

    ETC:电子不停车系统 主要由两部分构成:OBU(车载单元,又叫电子标签)和RSU(路基单元,包括天线) 其中OBU里插有用户卡(一般是和银行联名发行的信用卡) 而RSU包括路基天线,PSAM卡,通过 ...

  8. mysql存储过程和触发器

    mysql编程(存储过程和触发器) 存储过程 什么是存储过程 存储过程,带有逻辑的sql语句 存储过程特点 执行效率非常快!存储过程是在数据库的服务器端执行的!!! 移植性很差!不同数据库的存储过程是 ...

  9. java中super的用法

    在Java中,super关键字有2个用法,一个是访问父类的函数,一个是访问父类的变量,总体来说,就是一个功能,访问父类的成员. 代码如下: class Person { String name ; i ...

  10. Type Hierarchy

    Window - Preferences - General - Keys Name:         Open Type Hierarchy Description: Open a type hie ...