jQuery는 Alibaba Cloud 구매 서버를 모방하여 기간을 선택합니다. 작업은 간단합니다. 선택하려는 기간을 클릭하기만 하면 됩니다. 아래 렌더링을 보여드리면 모든 내용을 이해하실 수 있을 것입니다. 괜찮다고 생각하시면 구현 코드를 참고하시기 바랍니다.
렌더링은 다음과 같습니다.
코드:
<!doctype html> <html lang="en"> <head> <!-- 效果:http://hovertree.com/texiao/jquery// --> <meta charset="UTF-"> <title>jQuery点击选择购买年月时长 - 何问起</title><base target="_blank" /> <meta name="author" content="何问起" /> <style> /*reset部分 start*/ * { padding: ; margin: ; } html { font-family: "Microsoft Yahei",Arial,sans-serif; font-size: px; } body, div, dl, dt, dd, ul, ol, li, h, h, h, h, h, h, form, fieldset, input, button, textarea, p, th, td { padding: ; margin: ; font-family: "Microsoft YaHei",sans-serif,Arial; } table { border-collapse: collapse; border-spacing: ; } fieldset, img { border: ; } a { text-decoration: none; color: #; outline: none; } li { list-style: none; } caption, th { text-align: left; } h, h, h, h, h, h { font-weight: normal; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: medium; } input, button, textarea, select { *font-size: %; } /*a{-webkit-transition:all .s linear;-moz-transition:all .s linear;-ms-transition:all .s linear;-o-transition:all .s linear}*/ .fl { float: left; } .fr { float: right; } .clear:after { display: block; content: "clear"; height: ; clear: both; overflow: hidden; visibility: hidden; } .clear { zoom: ; } /*reset部分 end*/ .hovertreeBar { margin: px auto; width: px; border: px solid #FFCC; background: #FFF; } .hovertreeBar li { position: relative; float: left; width: px; height: px; line-height: px; border-right: px solid #FFCC; text-align: center; } .hovertreeBar li:last-child { border: none; } .hovertreeBar li:hover { background: #FCFE; cursor: pointer; cursor:pointer; } .hovertreeBar li p { text-align: center; } .phovertreeindex { display: none; position: absolute; left: %; top: -px; margin-left: -px; width: px; height: px; line-height: px; border: px solid #FFCC; background: #FCFE; } .hovertreeBar li:hover .phovertreeindex { /*display: block;*/ } .keleyitriangle-out { position: absolute; right: px; width: ; height: ; border-width: px; border-style: solid; border-color: #ffcc transparent transparent transparent; } .keleyitriangle-inner { position: absolute; right: px; width: ; height: ; border-width: px; border-style: solid; border-color: #FCFE transparent transparent transparent; } .hovertreeinfo{text-align:center;} </style> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-...min.js"></script> </head> <body> <div class="hovertreeinfo"><h>jQuery点击选择购买年月时长</h><a href="http://hovertree.com/h/bjaf/njmbkd.htm">原文</a> <a href="http://hovertree.com/" target="_blank">首页</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a> </div> <div> <ul class="hovertreeBar clear" id="hovertreeindex"> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> <div class="phovertreeindex"> <div>购买个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 年 <div class="phovertreeindex"> <div>购买年</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 年 <div class="phovertreeindex"> <div>购买年</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 年 <div class="phovertreeindex"> <div>购买年</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> </ul> </div> <!-- JS部分 --> <script> var arOB = []; var ULobj = $('#hovertreeindex>li'); for(var i=;i<ULobj.length;i++){ arOB.push(ULobj[i]); } function changeCS(ints){ for(var i=;i<arOB.length;i++){ if( i <= ints ){ arOB[i].style.backgroundColor="#FCFE"; }else{ arOB[i].style.backgroundColor="#FFF"; } } } $(function(){ $("#hovertreeindex>li").each(function(){ $(this).click(function(){ $(this).children(".phovertreeindex").show(); $(this).siblings().children(".phovertreeindex").hide(); var number=$(this).index(); var $j=$("#hovertreeindex>li").length; changeCS(number); // var li=new Array([$j]); // for(k=;k<$i.length;k++){ // alert(li[k]); // } }) }) }) </script> </body> </html>
Alibaba Cloud 구매 서버를 모방하고 구매 시간 길이를 선택하는 jQuery용 코드가 작성되었습니다. 코드는 비교적 간단하며 질문이 있는 경우 메시지를 남겨주시면 편집자가 알려드리겠습니다. 시간 내에 답장을 보내주세요!