首页>>Jquery文字>>支持手机端的银行卡选择 非select选择(2017-06-25)

支持手机端的银行卡选择 非select选择

支持手机端的银行卡选择 非select选择
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container-fluid" id="con">  
  2.     <div class="row bg-fff  par-top-40 pad-right-15" id="bank_show1"  >  
  3.         <table class="table">  
  4.             <tr>  
  5.                 <td class="form_td border-none td_bot" >姓名</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入姓名"/></td>  
  6.             </tr>  
  7.             <tr>  
  8.                 <td class="form_td border-none td_bot">身份证号</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入身份证号"/></td>  
  9.             </tr>  
  10.             <tr>  
  11.                 <td class="form_td border-none td_bot">选择银行</td>  
  12.                 <td class="border-none td_bot">  
  13.                     <div class="position-rel">  
  14.                         <div class="position-rel">  
  15.                             <input type="text" id="chose_input"   class="form-control" placeholder="--储蓄卡--"/>  
  16.                             <div class="bank_xljt"><img class="jt_xz" width="20" src="images/jtx.png" alt=""/></div>  
  17.                             <div id="chose_bank" class="bank_xljt1"></div>  
  18.                         </div>  
  19.                         <div class="bank_xl" style="display: none">  
  20.                             <ul>  
  21.   
  22.                                 <li class="hotBank-list">  
  23.                                     <a href="javascript:" class="hotBank-list-ico "  title="中国农业银行">  
  24.                                         <img src="images/zs1.png" width="150" alt=""/>  
  25.                                     </a>  
  26.                                 </li>  
  27.                                 <li class="hotBank-list">  
  28.                                     <a href="javascript:" class="hotBank-list-ico "  title="中国建设银行">  
  29.                                         <img src="images/zs2.png" width="150" alt=""/>  
  30.                                     </a>  
  31.                                 </li>  
  32.                                 <li class="hotBank-list">  
  33.                                     <a href="javascript:" class="hotBank-list-ico "  title="中国工商银行">  
  34.                                         <img src="images/zs3.png" width="150" alt=""/>  
  35.                                     </a>  
  36.                                 </li>  
  37.                                 <li class="hotBank-list">  
  38.                                     <a href="javascript:" class="hotBank-list-ico "  title="中国银行">  
  39.                                         <img src="images/zs4.png" width="150" alt=""/>  
  40.                                     </a>  
  41.                                 </li>  
  42.   
  43.   
  44.                             </ul>  
  45.                         </div>  
  46.                     </div>  
  47.                </td>  
  48.             </tr>  
  49.   
  50.         </table>  
  51.   
  52.     </div>  
  53.   
  54. </div>  

 

JavaScript Code
  1. <script>  
  2.     $(function(){  
  3.   
  4. //        下拉银行卡  
  5.   
  6.         $(".hotBank-list-ico").bind('click',function(){  
  7.            $('#chose_input').val($(this).attr('title'));  
  8.             $('.bank_xl').hide();  
  9.             $("#chose_bank").parent('div').find('img').addClass('jt_xz');  
  10.         });  
  11.         $("#chose_bank").click(function(){  
  12.             $('.bank_xl').show();  
  13.             $("#chose_bank").parent('div').find('img').removeClass('jt_xz');  
  14.         });  
  15. //        下拉银行卡  
  16.   
  17.     })  
  18. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_617.html