原生态js实现充话费功能（模态框 + tab选项卡）
之前分开写了模态框和选项卡的功能，今天把模态框和tab选项卡综合起来实现了充话费的功能，其实原理很简单，就是点击tab标题时，让它所对应的内容显示出来，可以用display:none，基本代码如下；
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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">
<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.8span>
div>
<div class="common_btn">
<button id="btn">立即充值button>
<a href="">花费冲50抢5a>
div>
form>
div>
<div class="content">
<form action="">
<label for="">充值号码:label>
<input type="text" placeholder="输入手机号码">
<br/>
<label for="">充值流量:label>
<ul class="common_ul">
<li>
<a href="">10Ma>
li>
<li>
<a href="">30Ma>
li>
<li>
<a href="">70Ma>
li>
<li>
<a href="">150Ma>
li>
<li>
<a href="">500Ma>
li>
<li>
<a href="" class="last">1000Ma>
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>
<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.8span>
div>
<button id="btn">立即充值button>
form>
div>
<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.8span>
div>
<button id="btn">立即充值button>
form>
div>
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;ifunction(){
for(let j = 0;j"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代码里面，如有不正确的地方反应执政