在移动互联网时代,HTML5开发越来越收到欢迎。

于是各种HTML5的框架都出来了。因为对于jquery的熟悉，jquery mobile 为多数人选择学习的对象。我也是众多追求者之中的一个。近期一直在开发jQuery Mobile的相关应用。

并颇有心得。再这里和大家一起分享一下。

好了，我们之间上代码： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>如有不懂。请加qq群：135430763，共同学习！

</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

  </head>

  <body>

    <div data-role="page" id="page" data-theme="b">

		<div data-role="header" data-position="fixed" data-theme="b">

			<h1>

				如有不懂，请加qq群：135430763。共同学习！

</h1>

			<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a>

		</div>

		<div data-role="content">

			<p>

				点击button2。隐藏button1。而且将button2改为圆角

			</p><p>

				点击button3。显示button1，而且将button2改为非圆角

			</p>

			<p>

				如有不懂，请加qq群：135430763。共同学习！

</p>

			<p>

				如有不懂，请加qq群：135430763，共同学习。

			</p>

			<p>

				如有不懂。请加qq群：135430763，共同学习！

			</p>

			<p>

				如有不懂，请加qq群：135430763，共同学习！

</p>

			<div data-role="controlgroup" data-type="horizontal">

				<input type="button" value="我是button1" data-inline="true" id="btn1">

				<input type="button" value="我是button2" data-inline="true" id="btn2">

				<input type="button" value="我是button3" data-inline="true" id="btn3">

			</div>

			<p>

				点击button5，隐藏button4。而且将button5改为圆角

			</p>

			<p>

				点击button6，显示button4，而且将button5改为非圆角

			</p>

			<div data-role="controlgroup" data-type="horizontal">

				<a href="#" data-role="button" id="a4">我是button4</a>

				<a href="#" data-role="button" id="a5" onclick="hideA();return false;">我是button5</a>

				<a href="#" data-role="button" id="a6" onclick="showA();return false;">我是button6</a>

			</div>

		</div>

		<div data-role="footer" data-position="fixed" data-theme="b">

			<span style="height: 40px; line-height: 40px; text-align: center; display: block; font-size: 9px;">如有不懂，请加qq群：135430763，共同学习！</span>

		</div>

	</div>

	<script type="text/javascript">

		//给button2绑定click事件

		$('#btn2').unbind().bind('click',function(){

			//隐藏button1

			$('#btn1').parent("div").css('display','none');

			//给button2加入样式，使button2变成圆角

			$('#btn2').parent("div").addClass('ui-first-child');

		});

	    //给button3绑定click事件

		$('#btn3').unbind().bind('click',function(){

			//隐藏button1

			$('#btn1').parent("div").css('display','');

			//给button2减去ui-first-child样式

			$('#btn2').parent("div").removeClass('ui-first-child');

		});

		//a5标签的onclick事件

		function hideA(){

			$('#a4').css('display','none');

			//给a5标签加入样式，使a5标签变成圆角

			$('#a5').addClass('ui-first-child');

		}

		//a6标签的onclick事件

		function showA(){

			$('#a4').css('display','');

			//给a5标签删除样式，使a5标签变成非圆角

			$('#a5').removeClass('ui-first-child');

		}

	</script>

  </body>

</html>

在看看执行效果：

更具体的学习资料，请点击下载：http://download.csdn.net/download/xmt1139057136/7447463

欢迎大家关注我的个人博客，如有不懂，请加qq群：135430763进行共同学习！

jQuery Mobile(jqm)button的隐藏和显示,包含a标签,圆角和非圆角button的更多相关文章

  1. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  2. jquery动画（控制动画隐藏、显示时间轴）

    <!DOCTYPE html><html> <head>    <meta http-equiv="Content-type" conte ...

  3. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等（二）

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  4. jQuery关于复制（复制隐藏文字+显示文字）跳转，Clipboard

    html: (直接上扎实的数据,框子自己搭建) <script type="text/javascript" src="../../js/jquery.min.js ...

  5. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  6. jquery的隐藏与显示

    ###显示与隐藏,通过用hide()和show()函数来实现 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback ...

  7. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  8. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  9. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

随机推荐

  1. 用opencv实现的PCA算法，非API调用

    理论參考文献:但此文没有代码实现.这里自己实现一下,让理解更为深刻 问题:如果在IR中我们建立的文档-词项矩阵中,有两个词项为"learn"和"study",在 ...

  2. 开源APM应用性能管理工具调研

    近期在设计一个DevOps平台.希望整合一个APM工具进来,由于APM既可用于性能測试也可用于运维性能监控,是典型的Dev+Ops产品. 商业的APM工具国内外已经有不少成熟产品了,而开源的好像不多见 ...

  3. Laravel异常处理

    Laravel异常处理 标签(空格分隔): php 自定义异常类 <?php namespace App\Exceptions; use Throwable; use Exception; cl ...

  4. 通过配置host，自定义域名让本地访问

    最近服务器这块一直由我来维护,我们开发的项目很多域名根本没有解析,而是仅仅配置了host,就可以本地访问服务器了.感觉很有意思,于是乎,打算试一试.结果弄了许久,最后第二天才解决了.把这个艰辛的旅程记 ...

  5. EF Code First 使用（一）

    第一步:创建MVC5项目,添加数据库实体,建立上下文对象. 第二步:创建数据库和添加数据

  6. 关于windows 2008 64位系统驱动的加载问题

    三点: 1.bcdedit /set loadoptions DDISABLE_INTEGRITY_CHECKS. 2.bcdedit /set testsigning on. 3.使用X64编译驱动 ...

  7. Eclipse键盘输出文字，显示到屏幕上方法

    方法1 /*标准的思路: * 分析: * 1.来源 * 键盘:System.in * 2.目的地 * 屏幕:System.out * 文件:FIle * 3.分别分析:源,目的地流的类型(字符,字节) ...

  8. Linux常见后缀缩写含义

    ctl: control rc: run control (A run-control file is a file of declarations or commands associated wi ...

  9. Android 强制软键盘关闭

    在Android开发过程中,有时候我们会有强制关闭软键盘的需求.比如说:现在有一个文本编辑框(testEt)和一个按钮(testBtn),我们现在点击文本编辑框testEd,这时会弹出软键盘,然后我们 ...

  10. 常规RPC通讯过程【转载】

    在 HTTP2 协议正式开始工作前, 如果已经知道服务器是 HTTP2 的服务器, 通讯流程如下: 客户端必须首先发送一个连接序言,其逻辑结构: PRI * HTTP/2.0\r\n\r\nSM\r\ ...