一. click事件

实现效果是点击切换按钮，可以重复的切换背景色

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>click 事件</title>

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

	<script type="text/javascript">

		$(function(){

			$('#btn').click(function(){

				$('.box').toggleClass('sty');

			});

		})

	</script>

	<style type="text/css">

		.box{

			width:200px;

			height:200px;

			background-color:gold;

		}

		.sty{

			background-color:green;

		}

	</style>

</head>

<body>

	<input type="button" name="" value="切换" id="btn">

	<div class="box"></div>

</body>

</html>

　　

注意：

重点是 $('.box').toggleClass('sty'); 当.box中有sty样式时，就自动去掉；当没有sty样式时，就自动加上

二. jquery选项卡

实现效果是点击选项卡时，选项卡背景会变色，并显示选项卡中特定的文本内容

<!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;  //值为none表示内容隐藏

			line-height:300px;

			text-align:center;

		}

		.contents div.active{

			display: block; //值为block表示显示内容

		}

	</style>

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

	<script type="text/javascript">

		$(function(){

                //#btns input表示第一个input元素

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

				// this是原生的对象

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

				//$(this).index() 获取当前按钮所在层级范围的索引值，注意display属性值的效果

				$('#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>

　　

click事件和jquery选项卡的更多相关文章

  1. table动态添加的tr 其click事件在IE兼容模式中不执行 jquery 1.9 的live事件 和获取 first last

    http://www.css88.com/jqapi-1.9/first-of-type/index.html#p=//www.css88.com/jqapi-1.9/last-child-selec ...

  2. jquery 自定义click事件执行多次

    用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...

  3. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  4. jquery 动态生成html后click事件不触发原因

    转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...

  5. jquery添加的html元素按钮为什么不执行类样式绑定的click事件

    代码举例: 更多按钮: <input type="button" class="addMore" id="addMore${issue.id } ...

  6. 搜索提示時jquery的focusout和click事件沖突問題完美解决

          在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示.輸入框为input,智能提示區域为suggest.接下來一般有兩種操作:        1.選擇某一提示,則把內容复制到input中 ...

  7. jquery href属性和click事件冲突

    a标签的定义如下: <a href="javascript:void(0);">test</a> jquery中的click事件: $("a&qu ...

  8. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  9. jquery的click事件对象试解

    在写这篇文档的时候,我并没有深入的去了解jquery的事件对象是什么样的构造,不过以我以往的经验,相信能说道说道,并且可能有百分之八十是正确的,所以我并不建议这篇文档具备一定的权威性,不过可以当成饭后 ...

随机推荐

  1. emulator: Trying to vcpu execute at eip:6d4053

  2. HTML5新增的非主体结构元素

    -------------------siwuxie095                                 HTML5 新增的非主体结构元素         1.header 元素   ...

  3. 快速上手Runtime（二）之给分类添加属性

    我们都知道,分类是不能直接添加属性的,那么我们有时候又需要实现这个功能,那么我们应该怎么办才能为分类添加上属性呢. Runtime给分类添加属性原理 给一个类声明属性,其实本质就是给这个类添加关联,并 ...

  4. Tomcat安装 以Linux 分支 Ubuntu Server 为例

    以Linux 分支 Ubuntu Server 为例.一.相关目录及作用说明 /etc/tomcat6 - 全局配置 /usr/share/tomcat6/ - 程序主目录 /usr/share/to ...

  5. leetcode array解题思路

    Array *532. K-diff Pairs in an Array 方案一:暴力搜索, N平方的时间复杂度,空间复杂度N 数组长度为10000,使用O(N平方)的解法担心TLE,不建议使用,尽管 ...

  6. JVM内存区域解析

    引言 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间.有的区域随着虚拟机进程的启动而存在,有些区域则是依赖用户线程的 ...

  7. 巧用渐变色打造精致移动端APP

    渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色.在扁平化设计刚刚兴起时,渐变是设计师们避之不及的设计手法.然而自从Instagram ...

  8. c#反射优化 表达式树

    using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; us ...

  9. tomcat端口作用

    <Server port="8005" shutdown="SHUTDOWN">   <Connector port="8080&q ...

  10. 实践作业3：白盒测试----junit的难点DAY11.

    本次白盒测试 需要独立完成整个项目和工具的配置安装运行操作,并编写.运行测试脚本,并完成实验的一些小细节等等. 首先,导入Junit测试框架所需的Jar包 然后编写测试脚本,为.java运行程序,见打 ...