一. 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. java中的==、equals()、hashCode()

    java中的==.equals().hashCode()源码分析 在java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际的编程总结一下. 1. ==  java中 ...

  2. 英文单词cipher 和password的区别，用法有什么不同，

    ['saɪfə(r)] cipher 指一套密码系统,比如电影<风声>中破译的那个系统叫cipher:password 则指进入的指令,比如你的qq密码,电脑密码等叫password.总之 ...

  3. 270. Closest Binary Search Tree Value 二叉搜索树中，距离目标值最近的节点

    ［抄题］: Given a non-empty binary search tree and a target value, find the value in the BST that is clo ...

  4. 29-中国剩余定理CRT

    https://blog.csdn.net/u010468553/article/details/38346195 中国剩余定理[数论] 2014年08月02日 12:55:59 阅读数:2351 中 ...

  5. HTTP/2协议

    一.简介 http://toutiao.com/a6258917202906104066/

  6. Linux hostname主机名配置文件与文件 /etc/hosts解析（copy来的，原作者看到了别打我）

    1.关于/etc/host,主机名和IP配置文件 Hosts - The static table lookup for host name(主机名查询静态表) hosts文件是Linux系统中一个负 ...

  7. Ubuntu16.0安装Eclipse Neon

    eclipse在Ubuntu下安装先安装jdk,配置环境变量,之后下载eclipse安装包,解压,放置在目标目录,将jre链接到该目录或者将jdk下的jre目录复制到eclipse安装包目录下,双击文 ...

  8. Java代码加密与反编译（二）：用加密算法DES修改classLoader实现对.class文件加密

    Java代码加密与反编译(二):用加密算法DES修改classLoader实现对.class文件加密 二.利用加密算法DES实现java代码加密 传统的C/C++自动带有保护机制,但java不同,只要 ...

  9. HUST软工1501-1503班第4周作业成绩公布

    说明 本次公布的成绩为第四周作业的结果: 第4周小组作业:WordCount优化 如果同学对作业结果存在异议,可以: 在毕博平台讨论区的第4周在线答疑区发帖申诉. 或直接在博客园本帖中进行评论进行申诉 ...

  10. scala初学笔记

    tips: 1.函数的定义: def addOne(m: Int): Int = m + 1 m为参数,要指定其类型,Int: 后边跟着返回值的类型,Int= 后边是函数的内部 2.匿名函数: (x: ...