仿淘宝商品属性代码（刚出炉）
欢迎和大家交流 ：）
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>
?
