以之前的选项卡例子为原版，当选上某一个选项卡的时候，选项卡周围会有一个蓝色的边框影响视觉体验，那么应该怎么去掉这个边框色呢？只需要加一行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. launcher启动应用重启的BUG解决

    最近遇到了一个问题,从launcher重新进入已经运行的应用会直接跳到应用的第一个界面. 经过对应用的跟踪,结合网络上的资料 http://stackoverflow.com/questions/19 ...

  2. 接口自动化 Windows + HttpRunner 初探（一）

    运行环境 HttpRunner 是一个基于 Python 开发的测试框架,可以运行在 macOS.Linux.Windows 系统平台上. HttpRunner 的开发环境为 macOS + Pyth ...

  3. 在tomcat中的conf文件夹下找server.conf 配置如下代码,可省略项目名路径访问 如 localhost:8080 即可访问到项目

    <Context path="" docBase="C:\Workspaces\Projects\SLSaleSystem_dw\WebRoot" rel ...

  4. ansible的ad-hoc模式

    一.什么是ad-hoc模式 ansible中有两种模式,分别是ad-hoc模式和playbook模式 ad-hoc简而言之,就是"临时命令" 二.ad-hoc模式使用的场景 场景一 ...

  5. How to Get the Length of File in C

    How to get length of file in C //=== int fileLen(FILE *fp) { int nRet = -1; int nPosBak; nPosBak = f ...

  6. easyui图标大全

    .icon-blank{ background:url('icons/blank.gif') no-repeat; } .icon-add{ background:url('icons/edit_ad ...

  7. zigbee广播通信原理

    广播:可以理解成,发送模块发出数据,这个网络里的所有节点模块都可以拿到这个数据. 实验:终端模块以广播的形式发送出去,让协调器和路由器模块作为接收器收到数据并显示出来! 协调器模块作为接收模块: 和单 ...

  8. Oracle——约束

    NOT NULLUNIQUE PRIMARY KEYFOREIGN KEYCHECK 如果不指定约束名 ,Oracle server 自动按照 SYS_Cn 的格式指定约束名 --指定约束名 CREA ...

  9. 二项分布&超几何分布

    伯努利分布  在一次试验中,事件A出现的概率为p,不出现的概率为q=1-p.若以β记事件A出现的次数,则β仅取0,1两值,相应的概率分布为: 二项分布是指在只有两个结果的n次独立的伯努利试验中,所期望 ...

  10. Swig在Mac OS X上的安装

    网上有很多类似文章介绍Swig怎么在Mac OS X上安装和配置,一般来说就是: 下载pcre,configure & make & make install 下载swig,confi ...