以之前的选项卡例子为原版，当选上某一个选项卡的时候，选项卡周围会有一个蓝色的边框影响视觉体验，那么应该怎么去掉这个边框色呢？只需要加一行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. Professional C# 6 and .NET Core 1.0 - Chapter 43 WebHooks and SignalR

    本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - Chapter 43 WebHooks ...

  2. ios野指针的3种常见情况

  3. opencv3.3

    --------------------opencv3.2 E:\Opencv\opencv3_2_1\opencv\mybuild\install\includeE:\Opencv\opencv3_ ...

  4. nginx相关教程

    1.nginx简易的教程 http://www.cnblogs.com/jingmoxukong/p/5945200.html#%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3 ...

  5. pcl point merge

    http://pointclouds.org/documentation/tutorials/pairwise_incremental_registration.php#pairwise-increm ...

  6. jstack调试core文件

    摘自:https://stackoverflow.com/questions/37331266/jstack-throws-exception-interrogating-a-core // 错误示例 ...

  7. [GO]百度贴吧的爬虫

    package main import ( "fmt" "strconv" "net/http" "os" " ...

  8. Html创建表单

    echo Html::beginForm(['/site/logout'], 'post'); echo Html::submitButton(Yii::t('app', 'logout'), ['c ...

  9. Hexo 最常用的几个命令

    Hexo 约有二十个命令,但普通用户经常使用的大概只有下列几个: hexo s hexo s 启动本地服务器,用于预览主题.默认地址: http://localhost:4000/ hexo s 是  ...

  10. jira项目管理平台搭建

    参考文档:http://www.cnblogs.com/ilanni/p/6200875.html   一.环境准备 jira7.2的运行是需要依赖java环境的,也就是说需要安装jdk并且要是1.8 ...