欢迎和大家交流 :)
QQ:59532543
or plugin
(function($){
$.fn.duoxuan = function(){
this.click(function(){
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find('i').remove();
}
else {
$(this).addClass("selected").append("<i>selected</i>");
}
})
};
$.fn.danxuan = function(){
this.click(function(){
$(this).addClass("selected").append("<i>selected</i>").siblings().removeClass("selected").find('i').remove();
})
}
})(jQuery);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
body {
font-family: Arial;
font-size: 12px;
}
* {
padding: 0;
margin: 0
}
.segment {
border: 1px solid #ccc;
padding: 8px;
display: inline-block;
}
.segment dl {
padding-bottom: 6px;
clear: both;
float: left;
}
.segment dl dt {
margin-top: 4px;
text-align: left;
float: left;
width: 40px;
}
.segment dl dd {
float: left;
}
ul {
list-style: none;
color: #666666;
}
ul li {
background-color: #FFFFFF;
float: left;
line-height: 20px;
margin: 0 4px 4px 0;
padding: 1px;
position: relative;
vertical-align: middle;
list-style: none;
}
ul li a {
background-color: #FFFFFF;
border: 1px solid #C8C9CD;
color: #000000;
display: block;
min-width: 10px;
padding: 0 6px;
text-align: center;
text-decoration: none;
white-space: nowrap;
width: auto !important;
}
.selected a, a:hover {
border: 2px solid #C30008;
margin: -1px;
}
.selected i {
background: url("http://img04.taobaocdn.com/tps/i4/T1vqNKXk8FXXXXXXXX.png") no-repeat scroll 0 0 transparent;
background-position: -150px -296px;
/*background-position: 0 -101px;*/
bottom: 0;
display: block;
height: 12px;
overflow: hidden;
position: absolute;
right: 0;
text-indent: -9999em;
width: 12px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#biketype ul li").click(function(){
//$(this).toggleClass("selected");
//alert($(this).attr("datavalue"));
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find('i').remove();
}
else {
$(this).addClass("selected").append("<i>selected</i>");
}
});
$("#sex ul li").click(function(){
$(this).addClass("selected").append("<i>selected</i>").siblings().removeClass("selected").find('i').remove();
});
})
</script>
</head>
<body>
<div class="segment">
<dl>
<dt>
<strong>I Ride</strong>
</dt>
<dd id="biketype">
<ul>
<li datavalue="Road">
<a href="#"><span>Road</span></a>
</li>
<li datavalue="MTB">
<a href="#"><span>MTB</span></a>
</li>
<li datavalue="City/Commuting">
<a href="#"><span>City/Commuting</span></a>
</li>
<li datavalue="Fixie/SS">
<a href="#"><span>Fixie/SS</span></a>
</li>
<li datavalue="Triathlon">
<a href="#"><span>Triathlon</span></a>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>
<strong>I am</strong>
</dt>
<dd id="sex">
<ul>
<li>
<a href="#"><span>Male</span></a>
</li>
<li>
<a href="#"><span>Female</span></a>
</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>