原生态js实现充话费功能（模态框 + tab选项卡）

最新推荐文章于 2022-12-01 10:38:01 发布

奋斗的妍

最新推荐文章于 2022-12-01 10:38:01 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/wyyandyou_6/article/details/81349150

版权

之前分开写了模态框和选项卡的功能，今天把模态框和tab选项卡综合起来实现了充话费的功能，其实原理很简单，就是点击tab标题时，让它所对应的内容显示出来，可以用display:none，基本代码如下；html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

奋斗的妍

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生态js实现充话费功能（模态框 + tab选项卡）

之前分开写了模态框和选项卡的功能，今天把模态框和tab选项卡综合起来实现了充话费的功能，其实原理很简单，就是点击tab标题时，让它所对应的内容显示出来，可以用display:none，基本代码如下；html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫