jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

简介: 在移动互联网时代,HTML5开发越来越收到欢迎。于是各种HTML5的框架都出来了。由于对于jquery的熟悉,jquery mobile 为多数人选择学习的对象。我也是众多追求者之一。最近一直在开发jQuery Mobile的相关应用。并颇有心得,再这里和大家一起分享一下。<br> 好了,我们之间上代码:<pre code_snippet_id="376784" snippet_file
在移动互联网时代,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>
				点击按钮2,隐藏按钮1,并且将按钮2改为圆角
			</p><p>
				点击按钮3,显示按钮1,并且将按钮2改为非圆角
			</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="我是按钮1" data-inline="true" id="btn1">
				<input type="button" value="我是按钮2" data-inline="true" id="btn2">
				<input type="button" value="我是按钮3" data-inline="true" id="btn3">
			</div>
			
			<p>
				点击按钮5,隐藏按钮4,并且将按钮5改为圆角
			</p>
			<p>
				点击按钮6,显示按钮4,并且将按钮5改为非圆角
			</p>
			
			<div data-role="controlgroup" data-type="horizontal">
				<a href="#" data-role="button" id="a4">我是按钮4</a>
				<a href="#" data-role="button" id="a5" onclick="hideA();return false;">我是按钮5</a>
				<a href="#" data-role="button" id="a6" onclick="showA();return false;">我是按钮6</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">
		//给按钮2绑定click事件
		$('#btn2').unbind().bind('click',function(){
			//隐藏按钮1
			$('#btn1').parent("div").css('display','none');
			//给按钮2添加样式,使按钮2变成圆角
			$('#btn2').parent("div").addClass('ui-first-child');
		});
	    //给按钮3绑定click事件
		$('#btn3').unbind().bind('click',function(){
			//隐藏按钮1
			$('#btn1').parent("div").css('display','');
			//给按钮2减去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进行共同学习!
目录
相关文章
|
7月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
57 0
|
7月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
40 0
|
28天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
28天前
|
JavaScript 小程序 前端开发
jQuery 同时获取多个标签的指定内容并储存为数组
jQuery 同时获取多个标签的指定内容并储存为数组
|
7月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
73 1
|
7月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
35 0
|
7月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
36 0
|
7月前
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
34 0
|
7月前
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
29 0
|
10月前
|
JavaScript 前端开发
前端——使用jQuery给a标签添加、修改href链接
前端——使用jQuery给a标签添加、修改href链接