您现在的位置是:首页 > 前端 > css网站首页css
css+jquery实现美化的switch开关
没有用插件,利用label + radio特性做了一个switch开关,代码简洁易懂,可以集成到项目里,美化radio,完整代码分享...
没有用插件,利用label + radio特性做了一个switch开关,如图所示:
完整代码分享:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blog.yzmcms.com</title> <style> .switch-title{float:left} .switch-radio{font-size:0;position:relative;overflow:hidden;display:block;border-radius:3px;float:left} .switch-radio input[type="radio"]{position:absolute;top:0;left:-9999px} .switch-radio .switch-label{color:#777;font-size:12px;line-height:20px;background-color:#ecf0f1;height:20px;padding:1px 9px;border-style:solid;border-color:#bec3c7;vertical-align:top;display:inline-block;*display:inline;*zoom:1;cursor:pointer} .switch-radio .switch-enable{border-width:1px 0 1px 1px;} .switch-radio .switch-disable{border-width:1px 1px 1px 0} .switch-radio .checked{color:#fff;background-color:#41bedd;border-color:#41bedd} </style> <script type="text/javascript" src="jquery.js"></script> </head> <body> <form action="http://www.yzmcms.com/post.php" method="post"> <div class="switch-title"> 启用API: </div> <div class="switch-radio"> <label for="yes" class="switch-label switch-enable checked">是</label> <label for="no" class="switch-label switch-disable">否</label> <input id="yes" name="show" value="1" type="radio" checked > <input id="no" name="show" value="0" type="radio"> </div> <br> <br> <input type="submit" value="提交"> </form> <script type="text/javascript"> $(function(){ $(".switch-label").on('click', function(){ var parent = $(this).parents('.switch-radio'); $('.switch-label',parent).removeClass('checked'); $(this).addClass('checked'); }); }); </script> </body> </html>
上一篇:css3中常见的单位及总结
下一篇:纯CSS实现步骤进度条效果
相关文章
文章评论 (0)
- 这篇文章还没有收到评论,赶紧来抢沙发吧~