效果如下：
html代码如下：
<html>
<head>
<title>
test
</title>
<style type="text/css">
dt,dd{
float: left;display:inline-block;
}
dt{
padding-top:24px;
}
ul li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;list-style: none;}
ul li a{ height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;text-decoration: none;color:#ccc;}
ul li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:1px; bottom:1px; background:url(img/selected.gif) no-repeat right bottom; z-index:99; display:none;}
.selected i{display: block;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').click(function(){
if(!$(this).hasClass("selected")){
$(this).addClass("selected").siblings("li").removeClass("selected");
alert($(this).data('sex'));
$("input[name='sex']").val($(this).data('sex'));
}
})
})
</script>
</head>
<body>
<form>
<dl>
<dt>性别</dt>
<dd>
<ul>
<li data-sex="1" class="selected"><a href="#">男</a><i></i></li>
<li data-sex="2"><a href="#">女</a><i></i></li>
</ul>
<input type="hidden" name="sex" value="1" />
</dd>
</dl>
</form>
</body>
</html>
下载源文件
