H5 選項卡—三級選單聯動
阿新 • • 發佈：2019-01-09
最近在寫html，寫了一個自定義選項卡，兩級選單聯動，作為初學者，程式碼比較亂，句釋什麼的沒怎麼仔細寫，大家將就看吧
<
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <title>三級選單</title> <script type="text/javascript" src="../js/jquery-3.0.0/jquery-3.0.0.js" ></script> <script type="text/javascript" src="../js/jquery-3.0.0/jquery-3.0.0.min.js" ></script> <style type="text/css"> *{padding: 0;margin: 0;} body{ background-color:#D3D3D3; } .top,.top_menu{ background-color:white ; color: black; padding:10px 10px 15px; margin:15px 5px; } .middle{ display: none; background-color:white ; color: black; margin:15px 5px; padding:5px 15px 20px; } .money button,.top_menu button{ margin: 10px 0.8%; width: 22%; height: 30px; background-color: white; border: 1px solid lightgrey; } .middleDetail{ width: 30px; margin: 10px 20%; } #pointOut{ color: darkorange; padding: 15px; } #bottom{ width: 50%; height: 50px; margin:0 20%; background-color: orange; font-size:20px ; color: white; } .money .active{color: orange;border: 1px solid orange;background-color: white;} .middie_menu li{ list-style-type: none; } .money_input{ /*background-color: red;*/ margin: 10px; text-align: center; } .money_input input{ width: 50%; /*background-color: blue;*/ margin: 5px; text-align: center; line-height: 20px; } .hidden{ display: none; } </style> </head> <body> <div class="top_menu"> <p class="topTitle">請選擇方式</p> <div class="money"> <button class="menu_btn active">方式一</button> <button class="menu_btn">方式二</button> <button class="menu_btn">方式三</button> <button class="menu_btn" value="4">方式四</button> </div> </div> <div class="middie_menu"> <ul> <li><div class="top" id="chagerWay1"> <p class="topTitle">請選擇金額</p> <div class="money"> <button class="btn">10元</button> <button class="btn">20元</button> <button class="btn">30元</button> <button class="btn" value="4">自定義</button> </div> </div></li> <li><div class="top hidden" id="chagerWay2"> <p class="topTitle">請時間電量</p> <div class="money"> <button class="btn">0.5小時</button> <button class="btn">1小時</button> <button class="btn">1.5小時</button> <button class="btn" value="4">自定義</button> </div> </div></li> <li><div class="top hidden" id="chagerWay3"> <p class="topTitle">請選擇電量</p> <div class="money"> <button class="btn">10度</button> <button class="btn">20度</button> <button class="btn">30度</button> <button class="btn" value="4">自定義</button> </div> </div></li> <li><div class="top hidden" id="chagerWay4"> <p class="topTitle">請輸入賬號/充電卡號</p> <div class="money_input"> <span>賬號：</span><input type="" name="" id="" value="" /> <br /> <span>密碼：</span><input type="" name="" id="" value="" /> </div> </div></li> </ul> </div> <div class="middle"> <p class="middleTitle">自定義金額</p> <span class="middleDetail"><input placeholder="請輸入" id="middle_input"><span id="middle_input_span">元</span></span> </div> <p id="pointOut">如已充滿或者其他意外情而停止，導致未完成系統會自動退回剩餘充電金額到您的支付賬戶。</p> <button id="bottom">確定</button> </body> <script type="text/javascript"> var index=0; var money=0; var chargeWayIndex=0; $(document).ready(function() { //點選確定按鈕，獲取選單引數 $("#bottom").click(function() { var y = $(".menu_btn"); console.log($(".menu_btn")); console.log($(".btn .active")); console.log(y[chargeWayIndex]); var btn = y[chargeWayIndex]; console.log(btn.innerHTML); var x = $(".btn"); console.log(x); console.log("index:"+index); console.log("chargeWayIndex:"+chargeWayIndex); console.log(x[index]); var indexy = index + chargeWayIndex*4; console.log(indexy); var xhtml = x[indexy].innerHTML; console.log(xhtml); console.log(xhtml.substring(0,xhtml.length-1)); }); // 二級選單點選事件 $(".btn").on("click",function(){ $(this).addClass("active").siblings().removeClass("active"); var sbtitle=$(".middle"); if($(this).index() == "3"){//判斷是否點選了自定義 if(sbtitle.length){ sbtitle.show(); } }else{ sbtitle.hide(); } index = $(this).index(); }); }); //以及選單點選事件 $(".menu_btn").on("click",function(){ $(this).addClass("active").siblings().removeClass("active"); var sbtitle=$(".top"); chargeWayIndex = $(this).index(); //alert(chargeWayIndex); // $(".btn").removeClass("active"); showtopmenu(chargeWayIndex); }); //改變三級選單自定義選項卡 function showtopmenu(i){ //以下三行程式碼不能少，會出現BUG $(".top").hide(); $(".middle").hide(); $(".btn").removeClass("active"); switch(i){ case 0: //alert("電量"); var visible = $("#chagerWay1"); visible.show(); // document.getElementsByClassName("middleTitle").innerHTML = "自定義充電金額"; $(".middleTitle").html("自定義充電金額"); $("#middle_input_span").html("元"); break; case 1: //alert("時間"); // $("middleTitle").innerText="自定義充電時長"; var visible = $("#chagerWay2"); visible.show(); // document.getElementsByClassName("middleTitle").val = "自定義充電時長"; var a = document.getElementById("middleTitle"); $(".middleTitle").html("自定義充電時長"); $("#middle_input_span").html("小時"); break; case 2: //alert("電量"); var visible = $("#chagerWay3"); visible.show(); // document.getElementsByClassName("middleTitle").innerHTML = "自定義充電電量"; $(".middleTitle").html("自定義充電電量"); $("#middle_input_span").html("度"); break; default: //alert("充滿"); var visible = $("#chagerWay4"); visible.show(); var sbtitle=$(".middle"); sbtitle.hide(); break; } } </script> </html>
