<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .btn-toggle{ 100px; height: 30px; position: relative; border-radius: 20px; background-color: #6699cc; float: right; } .btn-checkbox{ position: absolute; left:-4px; top:-3px; 100%; height: 100%; z-index: 10; opacity: 0; cursor: pointer; } .btn-style{ position: absolute; z-index: 9; height: 26px; 45px; background-color: #fff; border-radius: 20px; transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860); transition-property: all; left:2px; top:2px; } .btn-toggle .btn-checkbox:checked + .btn-style{ left:53px; } .btn-sex{ position: absolute; height: 30px; line-height: 30px; font-size: 16px; color: #fff; } .btn-toggle .left{ padding-left: 20px; } .btn-toggle .right{ padding-left: 65px; } </style> </head> <body> <div class="btn-toggle"> <input type="checkbox" class="btn-checkbox" checked="checked"> <div class="btn-style"></div> <div class="btn-sex left"> 男 </div> </div> </body> <script type="text/javascript" src="补货页面/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> /***********性别按钮特效＊＊＊***********/ $(function () { var onOff = true; $('.btn-toggle').on('click',function(){ var oToggle = $(this); var oSex = oToggle.children('.btn-sex'); if(onOff){ oToggle.css("background-color","#ccc"); oSex.text('女').removeClass('left').addClass('right'); onOff = false; }else { oToggle.css("background-color","#6699cc"); oSex.text('男').removeClass('right').addClass('left'); onOff = true; } }); }) </script> </html>