99久久国产露脸精品麻豆,欧美日韩精品小说,亚洲免费在线美女视频,国产三级中文字幕,91极品国产情侣高潮对白,国产亚洲一区二区三区不卡片,欧美jizz精品欧美性,久久国产精品久久国产片

css+jquery實現美化的switch開關

袁志蒙 2021-04-19 20:38:33 3814次瀏覽

摘要：沒有用插件，利用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>www.cwfssh.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>