一. 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. 02- 画文字和图片-------------之前写的那个微博项目，可以试试用画图片的方式来处理，这样应该比UILabel 代码少点，一会试试

    1.画图片 - (void)drawRect:(CGRect)rect { // Drawing code UIImage *image = [UIImage imageNamed:@"pa ...

  2. Spring学习笔记（四）--MVC概述

    一. 飞机 最近马来西亚航空370号班机事故闹得沸沸扬扬,情节整的扑朔迷离,连我在钻研springMVC平和的心情都间接的受到了影响.正当我在想这个MVC的处理过程可以怎样得到更好的理解呢?灰机,灰机 ...

  3. eclipse插件jd-eclipse的使用

    https://blog.csdn.net/u013215289/article/details/51275527

  4. javascript的constructor属性

    /* constructor 属性 constructor 属性返回所有 JavaScript 变量的构造函数. */console.log("John".constructor) ...

  5. java校验银行卡号

    public class CheckBankCard { /* 校验过程: 1.从卡号最后一位数字开始,逆向将奇数位(1.3.5等等)相加. 2.从卡号最后一位数字开始,逆向将偶数位数字,先乘以2(如 ...

  6. [C++] const and char*

    const and char* NOTICE:   char  *str = "hello";  the value of str is the address of the fi ...

  7. python移除系统多余大文件-乾颐堂

    文件多了乱放, 突然有一天发现硬盘空间不够了, 于是写了个python脚本搜索所有大于10MB的文件,看看这些大文件有没有重复的副本,如果有,全部列出,以便手工删除 使用方式 加一个指定目录的参数 比 ...

  8. 详解Python垃圾回收机制

    http://www.qytang.com/cn/list/28/417.htmhttp://www.qytang.com/cn/list/28/416.htmhttp://ww 引用计数 Pytho ...

  9. 一张图让你看懂HDMI针脚定义

    一张图让你看懂HDMI针脚定义 摘自:http://www.hdmiaoc.com/cjwt-175.html 什么是HDMI线,HDMI插头的每根PIN脚是什么意思? 大部分使用HDMI标准的研发及 ...

  10. HBase批量插入的简单代码

    由于项目需要从HBase里读取数据,进行MapReduce之后输出到HDFS中. 为了测试方便,我这里写了一个批量插入HBase数据的测试代码.采用的Maven工程. 打算,今后的所有用到的小测试例子 ...