仿选择版本页
描述：
有不同组类型，即类型A和类型B，类型包含具体型号类型如A_a、A_b等等。
具体型号类型有三种状态：可选状态、选中状态、不可选状态，可选状态具有态胎效果。
选中状态时按钮下一步变为可点击状态。
基础知识：
css方面内外边距的使用、二态效果、样式表中的类的使用等
js方面设计点击事件、闭包等。
效果如下图：
js源码及简单介绍：
/* * getId函数 * 功能：获取元素ID */ function getId(){ return document.getElementById(arguments[0]); } /* * getTagNames函数 * 参数kname：元素标签名称 * 参数pid：元素ID（可选） * 功能：获取指定元素对象的集合 */ function getTagNames(kname,pid){ if(arguments.length === 1){ return document.getElementsByTagName(kname); } else if(arguments.length === 2){ return getId(pid).getElementsByTagName(kname); } else{ alert("参数错误"); } } /* * addEvent函数 * 参数kid：元素ID * 参数ktype：事件类型 * 参数fn： 回调函数 * 功能：兼容IE6-8浏览器，封装事件绑定 */ function addEvent(kid,ktype,fn){ if(kid.addEventListener){ kid.addEventListener(ktype,fn,false); } else if(kid.attachEvent){ kid.attachEvent('on'+ktype,fn); } else{ kid['on'+ktype]=fn; } } var chooseArr = getTagNames("a","choose"),utype = null; for(var i = 0, l = chooseArr.length; i < l ; i++){ (function(index){ addEvent(chooseArr[index],'click',function(){ if(!(chooseArr[index].className === "saled" || chooseArr[index].className === "selected")){ for(var j = 0,len = chooseArr.length; j < len; j++){ if(!(chooseArr[j].className === "saled")){ chooseArr[j].className = ""; } } chooseArr[index].className = "selected"; utype = chooseArr[index].getAttribute("utype"); getId("btn").className = "btnnext"; } }); })(i); } addEvent(getId("btn"),"click",function(){ if(this.className.indexOf("unbtn")===-1){ alert(utype); } });
css源码及简单介绍：
.kchoose li dd a{ display: inline-block; width: 133px; height: 68px; text-align: center; background: #ffffff; border: 1px solid #83b3e3; box-shadow: 0 3px 4px #e1e1e1; cursor: pointer; margin-right: 10px; overflow: hidden; vertical-align: middle;} .kchoose li dd a:hover{border: 1px solid #FD6639;} .kchoose li dd a strong{ display: block; font-size: 18px; margin: 25px 0px; } .kchoose li dd a span{display: none;} .kchoose li dd a.selected{width: 129px; height: 64px; border: #FD6639 3px solid; cursor: default;} .kchoose li dd a.selected strong{ display: block; font-size: 18px; } .kchoose li dd a.saled{ border: 1px solid #dedede; background: #f1f1f1; cursor: default;} .kchoose li dd a.saled strong{color: #999999; margin: 15px 0px 3px; } .kchoose li dd a.saled span{color: #999999; display: block; }
详细源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择类型</title>
<style>
*{margin:0px; padding:0px; font-size: 12px; line-height: 20px;}
ol, ul,li {list-style: none;}
.cfl{*zoom:1;}
.cfl:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
.kchoose{width: 960px; margin: 10px auto 0px;}
.kchoose .ktype{margin-bottom: 10px;}
.kchoose li{width: 670px; padding: 0px 0px 30px 25px; border-bottom: #e1e1e1 1px solid;}
.kchoose li h2{font-size: 18px; padding: 35px 0px 20px;}
.kchoose li dl{float: left;width: 50%; }
.kchoose li dt{}
.kchoose li dt strong{display: block; padding: 0px 0px 6px; font-size: 14px; color: #666666;}
.kchoose li dt em{display: block; padding: 0px 0px 20px 0px ;font-style: normal; color: #999999;}
.kchoose li dd{}
.kchoose li dd a{ display: inline-block; width: 133px; height: 68px; text-align: center; background: #ffffff; border: 1px solid #83b3e3; box-shadow: 0 3px 4px #e1e1e1; cursor: pointer; margin-right: 10px; overflow: hidden; vertical-align: middle;}
.kchoose li dd a:hover{border: 1px solid #FD6639;}
.kchoose li dd a strong{ display: block; font-size: 18px; margin: 25px 0px; }
.kchoose li dd a span{display: none;}
.kchoose li dd a.selected{width: 129px; height: 64px; border: #FD6639 3px solid; cursor: default;}
.kchoose li dd a.selected strong{ display: block; font-size: 18px; }
.kchoose li dd a.saled{ border: 1px solid #dedede; background: #f1f1f1; cursor: default;}
.kchoose li dd a.saled strong{color: #999999; margin: 15px 0px 3px; }
.kchoose li dd a.saled span{color: #999999; display: block; }
.choosebtm{width: 695px; padding: 10px 0px 0px 0px; text-align: right;}
.btnnext{width: 170px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #FFF; background: #FE6539; border-radius: 5px; border: none; cursor: pointer;}
.unbtn{background: #e1e1e1; cursor: default;}
</style>
</head>
<body>
<form>
<div class="kchoose">
<ul id="choose">
<li>
<span class=""></span>
<h2>类型A</h2>
<div class="ktype cfl">
<dl>
<dt>
<strong>A类型</strong>
<em>AAAAAAAA</em>
</dt>
<dd class="cfl">
<a class="selected" utype="A_a">
<strong>A_a类型</strong>
<span>无</span>
</a>
<a class="saled" utype="A_b">
<strong>A_b类型</strong>
<span>无</span>
</a>
</dd>
</dl>
<dl>
<dt>
<strong>A类型加强版</strong>
<em>AAAAAAAA</em>
</dt>
<dd class="cfl">
<a utype="A_c">
<strong>A_c类型</strong>
<span>无</span>
</a>
<a utype="A_d">
<strong>A_d类型</strong>
<span>无</span>
</a>
</dd>
</dl>
</div>
<p>
选择A类型。。。
</p>
</li>
<li>
<span class=""></span>
<h2>B类型</h2>
<div class="cfl">
<dl>
<dt>
<strong>B类型</strong>
<em>BBBBBBBB</em>
</dt>
<dd>
<a utype="B_a">
<strong>B_a类型</strong>
<span>无</span>
</a>
</dd>
</dl>
</div>
</li>
</ul>
<div class="choosebtm">
<input id="btn" class="btnnext unbtn" type="button" value="下一步" />
</div>
</div>
</form>
<script type="text/javascript">
/*
* getId函数
* 功能：获取元素ID
*/
function getId(){
return document.getElementById(arguments[0]);
}/*
* getTagNames函数
* 参数kname：元素标签名称
* 参数pid：元素ID（可选）
* 功能：获取指定元素对象的集合
*/
function getTagNames(kname,pid){
if(arguments.length === 1){
return document.getElementsByTagName(kname);
}
else if(arguments.length === 2){
return getId(pid).getElementsByTagName(kname);
}
else{
alert("参数错误");
}
}/*
* addEvent函数
* 参数kid：元素ID
* 参数ktype：事件类型
* 参数fn： 回调函数
* 功能：兼容IE6-8浏览器，封装事件绑定
*/
function addEvent(kid,ktype,fn){
if(kid.addEventListener){
kid.addEventListener(ktype,fn,false);
}
else if(kid.attachEvent){
kid.attachEvent('on'+ktype,fn);
}
else{
kid['on'+ktype]=fn;
}
}var chooseArr = getTagNames("a","choose"),utype = null;
for(var i = 0, l = chooseArr.length; i < l ; i++){
(function(index){
addEvent(chooseArr[index],'click',function(){
if(!(chooseArr[index].className === "saled" || chooseArr[index].className === "selected")){
for(var j = 0,len = chooseArr.length; j < len; j++){
if(!(chooseArr[j].className === "saled")){
chooseArr[j].className = "";
}
}
chooseArr[index].className = "selected";
utype = chooseArr[index].getAttribute("utype");
getId("btn").className = "btnnext";
}
});
})(i);
}addEvent(getId(
"btn"),"click",function(){
if(this.className.indexOf("unbtn")===-1){
alert(utype);
}
});</script>
</body>
</html