<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<script src="http://js.ue.766.com/common/jqLib/jquery-1.6.2.min.js" type="text/javascript"></script>
<title>开关</title>
<style>
.box{background: #629FCEwidth: 200pxheight: 30pxborder-radius: 15pxposition: relativeleft: 50pxtop: 50px}
.slider{background: #F6F6F6width: 100pxheight: 30pxborder-radius: 15pxposition: absolutetransition: left 0.5s -moz-transition: left 0.5s -webkit-transition: left 0.5sleft:0}
span{height: 30pxline-height: 30pxcolor: #F6F6F6font-weight: 800}
.m{float: leftmargin-left: 50px}
.w{float: rightmargin-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>
手打了一个给你，嘿嘿
css是没有点击效果的，所以没法只通过css来实现图片互换，可以实现鼠标移上去背景图互换，使用:hover，li{background:none} li:hover{background:red}。点击效果必须使用js，当点击时，更改class。
按钮绑定一个点击事件，只是改变少量的样式使用$(".div").css("background","red")即可，如果是整个页面改变，就需要用到页面样式写缓存或数据库，重新加载页面来判断用户选择了那个样式，然后显示不同的样式加载
