怎麽用HTML CSS做出切換開關
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"/common/jqLib/jquery-1.6.2.min.js"?type="text/javascript"></script>
<title>開關</title>
<style>
.box{background:?#629FCE;width:?200px;height:?30px;border-radius:?15px;position:?relative;left:?50px;top:?50px}
.slider{background:?#F6F6F6;width:?100px;height:?30px;border-radius:?15px;position:?absolute;transition:?left?0.5s;?-moz-transition:?left?0.5s;?-webkit-transition:?left?0.5s;left:0}
span{height:?30px;line-height:?30px;color:?#F6F6F6;font-weight:?800;}
.m{float:?left;margin-left:?50px}
.w{float:?right;margin-right:?50px}
</style>
</head>
<body>
<div?class="box">
<div?class="slider"?id="slider"></div>
<span?class="m">男</span>
<span?class="w">女</span>
</div>
</body>
<script>
$("#slider").toggle(
function?()?{
$(this).css("left","100px");
},
function?()?{
$(this).css("left","0");
}
);
</script>
</html>
手打了壹個給妳，嘿嘿