WEB开发网
开发学院网页设计JavaScript 用jQuery制作模拟下拉框 阅读

用jQuery制作模拟下拉框

 2010-03-10 00:00:00 来源:WEB开发网   
核心提示:第一步:先搭建好结构这是普通的下拉框代码:XML/HTML代码1.<selectname="abc"id="abc">2.<optionvalue="1">选项一</option>3.<optionvalue=&quo

第一步:先搭建好结构

这是普通的下拉框代码:

XML/HTML代码

   1. <select name="abc" id="abc">  
   2.     <option value="1">选项一</option>  
   3.     <option value="2">选项二</option>  
   4.     <option value="3">选项三</option>  
   5.     <option value="4">选项四</option>  
   6.     <option value="5">选项五</option>  
   7.     <option value="6">选项六</option>  
   8. </select> 

这个是模拟出来的:

XML/HTML代码

   1. <div class="CRselectBox">  
   2.     <input type="hidden" value=""  name="abc" id="abc"/> <!-- hidden 用来代替select的值 -->  
   3.     <input type="hidden" value=""  name="abc_CRtext" id="abc_CRtext"/> <!-- hidden 用来代替select的文本-->  
   4.     <a class="CRselectValue" href="#">选项一</a>  
   5.     <ul class="CRselectBoxOptions">  
   6.         <li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li>  
   7.         <li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li>  
   8.         <li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li>  
   9.         <li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li>  
  10.         <li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li>  
  11.         <li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li>  
  12.     </ul>  
  13. </div>  

1 2  下一页

Tags:jQuery 制作 模拟

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接