一. 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. 配置siebel捕捉SQL语句

    C:\Siebel\15.0.0.0.0\Client\BIN\siebel.exe /c c:\Siebel\15.0.0.0.0\Client\bin\chs\siebel.cfg /B &quo ...

  2. Android开发实战之拥有Material Design风格的侧滑布局

    在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也 ...

  3. windows 查看端口被占用进程

    查看占用63243是谁 C:\Users\Administrator>netstat -aon|findstr "63243" TCP 172.27.33.11:63243 ...

  4. Python爬虫实战六之抓取爱问知识人问题并保存至数据库

    大家好,本次为大家带来的是抓取爱问知识人的问题并将问题和答案保存到数据库的方法,涉及的内容包括: Urllib的用法及异常处理 Beautiful Soup的简单应用 MySQLdb的基础用法 正则表 ...

  5. System.Reflection.Emit摘记

    动态类型在.net中都是用什么类型来表示的.程序集:System.Reflection.Emit.AssemblyBuilder(定义并表示动态程序集)构造函数:System.Reflection.E ...

  6. input框添加阴影效果

    .input:hover,.input:focus{ border:1px solid #85afe1; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0 ...

  7. [GO]定时器的停止和重置

    package main import ( "time" "fmt" ) func main() { timer := time.NewTimer( * tim ...

  8. C# 订单号的生成

    /**        * 根据当前系统时间加随机序列来生成订单号         * @return 订单号        */        public static string Generat ...

  9. 编写高质量代码改善C#程序的157个建议——建议113：声明变量前考虑最大值

    建议113:声明变量前考虑最大值 假设正在开发一个工资系统,其中一个模块负责处理加薪.代码如下: static void Main(string[] args) { ; salary = (); Co ...

  10. 基于 Web 的数据挖掘－－自动抽取用 HTML、XML 和 Java 编写的信息

    简介: 不可否认,万维网是到目前为止世界上最丰富和最密集的信息来源.但是,它的结构使它很难用系统的方法来利用信息.本文描述的方法和工具将使那些熟悉 Web 最常用技术的开发人员能快速而便捷地获取他们所 ...