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

来源：互联网发布：java final class 编辑：程序博客网时间：2024/05/22 16:46

在移动互联网时代,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进行共同学习！

60 1