之前分开写了模态框和选项卡的功能，今天把模态框和tab选项卡综合起来实现了充话费的功能，其实原理很简单，就是点击tab标题时，让它所对应的内容显示出来，可以用display:none，基本代码如下；
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./css/08.css"><script src="./js/08.js"></script></head><body><button id="phone">充话费</button><div id="out"><div class="modal" id="modal"><div class="modal_content w740"><header class="modal_header"><div class="tab_wrapper"><span class="tab on default">充话费</span><span class="tab on">充流量</span><span class="tab on">充固话</span><span class="tab on">充宽带</span><span class="close">×</span></div></header><div class="modal_body"><!-- 充话费 start --><div class="content" style="display: block;"><form action=""><label for="">充值号码:</label><input type="text" placeholder="输入手机号码"><br/><label for="">充值面值:</label><ul class="common_ul"><li><a href="">100元</a></li><li><a href="">50元</a></li><li><a href="">30元</a></li><li><a href="" class="last">其他面值</a></li></ul><br/><div class="common_pic"><label for="">销售价格:</label><span class="phone_price">￥49-49.8</span></div><div class="common_btn"><button id="btn">立即充值</button><a href="">花费冲50抢5</a></div></form></div><!-- 充话费 end --><!-- 充流量 start --><div class="content"><form action=""><label for="">充值号码:</label><input type="text" placeholder="输入手机号码"><br/><label for="">充值流量:</label><ul class="common_ul"><li><a href="">10M</a></li><li><a href="">30M</a></li><li><a href="">70M</a></li><li><a href="">150M</a></li><li><a href="">500M</a></li><li><a href="" class="last">1000M</a></li></ul><div class="flow"><label for="">销售价格:</label><div class="sell_price clearfix"><div class="flow_con fl"><a href="">本地流量</a><a href="">即时生效，当月失效</a></div><div class="fr"><a href="" class="flow_price">￥3元</a></div></div></div><button id="btn">立即充值</button></form></div><!-- 充流量 end --><!-- 充固话 start --><div class="content" ><form action=""><div class="operator "><label for="">运营商:</label><a href="">电信</a><a href="">联通</a></div><div class="num"><label for="">充值号码</label><div class="num_input"><input type="text" placeholder="区号"><span>-</span><input type="text" placeholder="号码不支持小灵通"></div></div><label for="">充值面值:</label><ul class="common_ul"><li><a href="">100元</a></li><li><a href="">50元</a></li><li><a href="">30元</a></li><li><a href="" class="last">其他面值</a></li></ul><div class="common_pic"><label for="">销售价格:</label><span class="phone_price">￥49-49.8</span></div><button id="btn">立即充值</button></form></div><!-- 充固话 end --><!-- 充宽带 start --><div class="content" ><form action=""><div class="operator "><label for="">运营商:</label><a href="">电信</a><a href="">联通</a></div><div class="mt10"><label for="">所在城市:</label><select name="" id=""><option value="1" selected>请选择</option><option value="2">北京</option></select></div><div class="mt10"><label for="">宽带账号</label><input type="text" name="" id="" placeholder="请输入宽带账号"></div><label for="">充值面值</label><ul class="common_ul "><li><a href="">100元</a></li><li><a href="">50元</a></li><li><a href="">30元</a></li><li><a href="" class="last">其他面值</a></li></ul><div class="common_pic mt10"><label for="">销售价格:</label><span class="phone_price">￥49-49.8</span></div><button id="btn">立即充值</button></form></div><!-- 充宽带 end --></div></div></div></div></body></html>
css：
/* 重置样式start */*{margin: 0;padding: 0;}.fl{float: left;}.fr{float: right;}body{color: #333333;}.w740{width: 740px;margin-left: auto;margin-right: auto;background-color: #fff;}ul{list-style: none;}ul li{float: left;}a{color: #333333;text-decoration: none;}.on{border-bottom: 2px solid transparent;}label{color: #333333;font-size: 14px;margin-right: 15px;display: inline-block;width: 65px;text-align: right;}input{width: 260px;height: 35px;padding-left: 18px;}.clearfix{display: block;content: "";clear: both;overflow: hidden;height: 0;}.mt10{margin-top: 10px;}/* 重置样式end */#phone{cursor: pointer;width: 100px;height: 50px;border: 1px solid rebeccapurple;}.none{display: none;}/* top start */#out{width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: none;}.modal{width: 740px;position: fixed;top: 10%;left:20%;}.modal_content header{width: 740px;height: 53px;padding-top: 17px;border-bottom: 1px solid #666666;background-color: #fafafa;line-height: 53px;position: relative;}header .tab_wrapper{width:600px;margin: 0 auto;}header span{display: inline-block;height: 49px;padding: 0 26px;color: #999;font-size: 18px;line-height: 49px;text-align: center;cursor: pointer;}.close{color: #b7b7b7;font-size: 30px;font-weight: bold;position: absolute;right: 10px;top: 0px;}/* top end *//* 充话费 start */.modal_body{width: 740px;height: 283px;padding: 30px 0;}.modal_body form{width: 587px;height: 183px;margin: 0 auto;}.common_ul{display: inline-block;vertical-align: -10px;margin-top: 20px;width: 500px;}.common_ul li a{display: inline-block;border: 1px solid #b7b7b7;border-right: 1px solid transparent;height:30px;line-height: 30px;padding: 0 15px;text-align: center;font-size: 14px;color: #999;}.common_ul .last{border-right: 1px solid #b7b7b7;}.common_ul li a:hover{border: 2px solid #ff7500;}.common_pic{margin-top: 20px;width: 500px;}.phone_price {color: #ff7500;font-size: 18px;font-weight: bold;display: inline-block;width: 100px;height: 30px;line-height: 30px;}#btn{width: 100px;height:40px;margin-left: 80px;margin-right: 20px;margin-top: 20px;color: white;font-size: 14px;text-align: center;padding: 6px 20px;border: none;border-radius: 3px;background-color: #ff7500;}.common_btn a{font-size: 12px;color: #1A83D6;}.common_btn a:hover{color: #ff7500;}.content{display:none;}/* 充话费 end *//* 充流量 start */form .flow{margin-top: 20px;}.flow .sell_price{display: inline-block;width: 265px; height: 72px;border: 1px solid #b7b7b7;/* line-height: 72px; */vertical-align: middle;border-radius: 5px; }.flow .sell_price:hover{border: 2px solid #ff7500;}.flow .sell_price a{color: #666666;font-size: 14px;}.flow_con{padding:14px 0 14px 20px;background-color: #fafafa;width: 180px;}.flow_con a{display: block;width: auto;height: 20px;}.flow_price{display: inline-block;padding-right: 10px;width: 55px;text-align: center;height: 72px;line-height: 72px;}/* 充流量 end *//* 充固话 start */.operator a{display: inline-block;width: 78px;height: 38px;text-align: center;line-height: 38px;border:1px solid #b7b7b7;margin-right: 15px;}.operator a:hover{border:2px solid #ff7500;}.num{margin-top: 20px;}.num_input{display: inline-block;border:1px solid #b7b7b7; }.num input{border: 0;width: 178px;outline: none;}.num input:nth-of-type(1){width: 30px;}/* 充固话 end *//* 充宽带 start */select{width: 100px;height: 35px;}/* 充宽带 end */
js
//第一步点击p标签出现modal模态框//第二部实现tab选项卡//遍历tab//去掉当前所有的on属性//给当前的span添加on//去掉所有的form//让当前form显示出来window.onload = function(){let btn = document.getElementById('phone');//获取打开模态框的按钮let out = document.getElementById("out"); //模态框的显示隐藏let close = document.getElementsByClassName("close")[0]; //获取关闭按钮let spans = document.getElementsByClassName("tab"); //获取tab标题let divs = document.getElementsByClassName("content"); //获取tab内容//模态框的打开与关闭btn.onclick = function(){out.style.display = "block"}close.onclick = function(){out.style.display ="none"}for(let i = 0;i<spans.length;i++){spans[i].onclick = function(){for(let j = 0;j<spans.length;j++){divs[j].style.display = "none";spans[j].style.borderColor ="transparent";spans[j].style.color ="";}this.style.borderColor = "#ff7500"; divs[i].style.display = "block";this.style.color = "#ff7500";}}}
js思路在js代码里面，如有不正确的地方反应执政
