一. 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. Spring Data Solr操作solr的简单案例

    Spring Data Solr简介 虽然支持任何编程语言的能力具有很大的市场价值,你可能感兴趣的问题是:我如何将Solr的应用集成到Spring中?可以,Spring Data Solr就是为了方便 ...

  2. 微信图片反防盗链 用js不太成熟的解决方式 仅供参考

    $("#imgDiv img").each(function () { var img = $(this); var img_src = img.attr("src&qu ...

  3. .net中delegate的使用

    js中的写法: var GetEntityList = function(pParameter){ var list =[]; return list; }; var aEntityList = Ge ...

  4. HP发送HTTP POST请求 返回结果

    HP发送HTTP POST请求 返回结果 <?php $srv_ip = '192.168.10.188';//你的目标服务地址或频道.$srv_port = 80;$url = '/demo/ ...

  5. poi导出excle测试类

    package poiexcel; import java.util.ArrayList; import java.util.List; public class Test { public stat ...

  6. Redis中redis.conf里面配置详解

    是否将redis设置为守护程序,默认为no daemonize yes   如果设置为守护程序,需要指定pid文件 pidfile /var/run/redis/redis-server.pid   ...

  7. 并发编程CAS操作

    并发编程CAS操作 简介 CAS即compare and swap,中文就是比较并交换 CAS是Java并发包的基石 原理 其实CAS的原理相对来说比较简单.将要被改变的数据和期望的值作比较,当两个值 ...

  8. 【转】JAVA 并发编程-多个线程之间共享数据

    原文地址:http://blog.csdn.net/hejingyuan6/article/details/47053409# 多线程共享数据的方式: 1,如果每个线程执行的代码相同,可以使用同一个R ...

  9. C#延迟执行

    借鉴于该篇博客:http://kb.cnblogs.com/page/42581/ 先看两个方法 public class YieldClasses { public static IEnumerab ...

  10. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...