ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery は Alibaba Cloud 購入サーバーのコードを模倣して購入時間 length_jquery を選択します
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 のコードが書かれています。コードは比較的単純で、コメントはありません。質問がある場合は、メッセージを残してください。編集者が対応します。時間内に返信してください!