以之前的选项卡例子为原版，当选上某一个选项卡的时候，选项卡周围会有一个蓝色的边框影响视觉体验，那么应该怎么去掉这个边框色呢？只需要加一行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. hdu1710-Binary Tree Traversals （由二叉树的先序序列和中序序列求后序序列）

    http://acm.hdu.edu.cn/showproblem.php?pid=1710 Binary Tree Traversals Time Limit: 1000/1000 MS (Java ...

  2. [C++] Pen questions & linux cmd

    1.宏替换,完全展开替换,注意带来副作用 #include <stdio.h>#define 打印语句 printf(“hello”); Void main(void) { If (1) ...

  3. echo $[1 + 2] shell中 $[] 在bash中同$(())，用于算术计算

    shell脚本编写:echo $[ 11#8+1] 输出结果是几,为什么,怎么算来的?  摘自:https://zhidao.baidu.com/question/334766451.html   结 ...

  4. SetDns.bat 2014-03-28 20:00:19

    此BAT文件,可以帮助便捷切换dns设置,Win7系统需使用管理员身份运行. @echo off echo 设置为GoogleDNS(1)/dhcp(2)/OpenDNS(3) set /p sel= ...

  5. 1、概率vs统计

  6. [GO]匿名字段

    package main import ( "fmt" ) type Person struct { name string sex byte age int } type Stu ...

  7. [GO]结构体成员的使用：指针变量

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  8. Cannot evaluate the property expression "$([MSBuild]::ValueOrDefault('$(VCTargetsPath)','$(MSBuildExtensionsPath32)\Microsoft.Cpp\v4.0\V140\'))" found at "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MSBuil

    Cannot evaluate the property expression "$([MSBuild]::ValueOrDefault('$(VCTargetsPath)','$(MSBu ...

  9. 编写高质量代码改善C#程序的157个建议——建议149：使用表驱动法避免过长的if和switch分支

    建议149:使用表驱动法避免过长的if和switch分支 随着代码变得复杂,我们很容易被过长的if和switch分支困扰. 一个类枚举类型Week如下: enum Week { Monday, Tue ...

  10. Android测试入门篇

    Android本身是一套软件堆叠(Software Stack),或者成为软件叠层架构,叠层主要分成三层:操作系统.中间件和应用程序. Android构架 1. Application 应用程序层:用 ...