之前分开写了模态框和选项卡的功能,今天把模态框和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="">