H5 选项卡—三级菜单联动

来源：互联网发布：java 获取对象大小编辑：程序博客网时间：2024/06/11 05:25
最近在写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>
0 0