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>

完整代码分享：

随机内容