剛開始學jquery,工作中有些css表單中的按鈕美化很麻煩,所以想著用jquery來替換,複選框的jquery很容易,就是簡單的樣式切換效果,用toggleClass()方法即可。
而單選框之前一直不知道怎麼做,因為在單選框中選中一個,其他的都必須移除掉樣式,如果2個單選框在同級中則用siblings()則可直接找到其他單選框移除掉樣式即可。鑑於自己工作
是循環列表模式,每個
css如下:
<!DOCTYPE html> <html class="area"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <title>设置-收货地址</title> <link rel="stylesheet" href="../css/app.css"> <script src="../js/jquery.js"></script> //<![CDATA[ <script> $(function(){ //改变样式同时改变右边的文字 $("span.zdy-icon-radio").click(function(){ $(this).addClass("active").text("默认地址") .parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认"); }); }) //]]> </script> <style> .bjsc-lf span{float: left;} .bjsc-lf > span:last-child{line-height: 2.1rem;} .zdy-icon-radio{display:block;width: 30%rem; height: 2.15rem;margin-right: 1rem;padding-left: 3.15rem;line-height: 2.15rem; font-family:"微软雅黑";float: left;background:url(../img/checkRight.jpg) no-repeat;background-size: 2.1rem 2.1rem;;} .bjsc-rt{float: right;} .zdy-icon-radio.active{background: url(../img/checked.png) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;} </style> </head> <body> <p class="xp-content02"> <p class="tt02"> 编辑地址 </p> <p class="bianji-dizhi"> <p class="tt09"> <span>15354656536</span> <span>苏定芳</span> </p> <p class="your-adress02"> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </p> <p class="bianji-shanchu mui-clearfix"> <p class="bjsc-lf mui-clearfix"> <span class="zdy-icon-radio active">默认地址</span> </p> <p class="bjsc-rt"> <span class="mui-icon mui-icon-compose"></span>编辑 <span class="mui-icon mui-icon-trash"></span>删除 </p> </p> </p> <p class="greybg02"></p> <p class="bianji-dizhi"> <p class="tt09"> <span>15354656536</span> <span>苏定芳</span> </p> <p class="your-adress02"> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </p> <p class="bianji-shanchu mui-clearfix"> <p class="bjsc-lf"> <span class="zdy-icon-radio">设为默认</span> </p> <p class="bjsc-rt"> <span class="mui-icon mui-icon-compose"></span>编辑 <span class="mui-icon mui-icon-trash"></span>删除 </p> </p> </p> <p class="greybg02"></p> <p class="bianji-dizhi"> <p class="tt09"> <span>15354656536</span> <span>苏定芳</span> </p> <p class="your-adress02"> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </p> <p class="bianji-shanchu mui-clearfix"> <p class="bjsc-lf"> <span class="zdy-icon-radio">设为默认</span> </p> <p class="bjsc-rt"> <span class="mui-icon mui-icon-compose"></span>编辑 <span class="mui-icon mui-icon-trash"></span>删除 </p> </p> </p> <p class="greybg02"></p> </body> </html>
效果如下:無論如何都只能一個新增樣式,右邊文字也隨點擊改變。
以上是jQuery模仿單選按鈕選取效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!