仿淘宝选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#box{
width:600px;
height:600px;
margin: 50px auto;
}
.head{
width:600px;
height:400px;
}
.head p{
margin-bottom: 15px;
}
.head p font{
font-size: 14px;
color:#000;
margin-right: 15px;
}
.head p span{
font-size: 14px;
color:#666;
border:1px solid #999;
display: inline-block;
padding: 8px;
cursor:pointer;
}
.head p span.on{
border:2px solid #FF6600;
padding: :7px;
background: url(img/on.png) no-repeat right bottom;
}
</style>
</head>
<body>
<div id="box">
<div class="head">
<p class="model">
<font>型号</font>
<span class="on">4英寸</span>
<span>5英寸</span>
</p>
<p class="color">
<font>颜色</font>
<span class="on">白色</span>
<span>金色</span>
<span>黄色</span>
</p>
<p class="random">
<font>颜色</font>
<span class="on">8GB</span>
<span>16GB</span>
<span>32GB</span>
</p>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(".head p span").click(function(){
$(this).parent().children().removeClass("on");
$(this).addClass("on")
})
</script>
</body>
</html>
on.png：
例子：
