JQ实现——TAB选项卡切换登录界面

标签: Web前端  TAB切换  JavaScript

今天,分享一个简单实用的TAB选项卡切换登录界面。
这里写图片描述
这里写图片描述

主页部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="css/login.css">
    <title>Login</title>
</head>
<body>
    <div class="section">
        <div class="all">
            <div class="nav">
                <a class="login on">普通登陆</a>
                <a class="login">二维码登陆</a>
            </div>
            <div class="contentbox">
                <div class="box active">
                    <div class="cont-1">
                        <input class="icon email" name="txt" type="text" placeholder="邮箱">
                        <input class="icon password" name="psd" type="password" placeholder="密码">
                        <div class="verify">
                            >>>请依次点击"敏","享","昔"完成验证>>>
                        </div>
                        <button class="btn">登&nbsp;&nbsp;陆</button>
                        <div class="about"><a href="#">忘记密码?&nbsp;&nbsp;<span></span>&nbsp;&nbsp;注册&nbsp;&nbsp;<span></span>&nbsp;&nbsp;关于网易邮箱帐号</a></div>
                    </div>
                </div>
                <div class="box">
                    <div class="cont-2">
                        <span class="text">使用&nbsp;<a href="#">网易帐号管家</a>&nbsp;或&nbsp;<a href="#">邮箱大师</a>&nbsp;扫一扫快速登陆</span>
                        <img src="img/img2_01.png" width="190" height="190">
                        <div class="about"><a href="#">忘记密码?&nbsp;&nbsp;<span></span>&nbsp;&nbsp;注册&nbsp;&nbsp;<span></span>&nbsp;&nbsp;关于网易邮箱帐号</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $().ready(function(){
            $(function(){
                $(".nav a").off("click").on("click",function(){
                    var index = $(this).index();
                    $(this).addClass("on").siblings().removeClass("on");
                    $(".contentbox .box").eq(index).addClass("active").siblings().removeClass("active");
                });
            });
        })
    </script>
    <!--[if lte IE 9]>
     <script src="https://cdn.bootcss.com/jquery-placeholder/2.3.1/jquery.placeholder.min.js"></script>
     <script>
        $(function(){
            $('input[placeholder]').placeholder();
            $('.password').css({"margin-top":"17px"})
        });
     </script>
    <![endif]-->
</body>
</html>

样式部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.section{
    margin: 100px auto;
    width: 472px;
    height: 422px;
    background-color: #39a6eb;
    padding: 8px 10px;
    font-family: "Microsoft YaHei";
}
.all{
    width: 450px;
    height: 405px;
}
.nav{
    height: 50px;
}
.nav>a{
    padding: 0 15px;
    width: 225px;
    height: 50px;
    line-height: 50px;
    display: block;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    float: left;
    cursor: pointer;
}
.nav>a[class="on-2-login"]{
    background-color: #89caf4;
    border-bottom: 1px solid #eee;
}
.login{
    background-color: #89caf4;
}
.login.on{
    background-color: #e1f2fc;
}
.contentbox{
    width: 450px;
}
.cont-1>input{
    width: 350px;
    height: 46px;
    border: 1px solid #c6cddc;
}
.email{
    background-image: url("../img/img1-coin1_03.png");
    background-repeat: no-repeat;
    background-position: 3px 0px;
}
.password{
    background-image: url("../img/img1-coin2_03.png");
    background-repeat: no-repeat;
}
.cont-1>input{
    line-height: 46px;
    padding-left: 40px;
}
.cont-1>input[name="txt"]{
    margin-top: 35px;
}
.cont-1>input[name="psd"]{
    margin-top: 17px;
}
.verify{
    margin: 0 auto;
    width: 352px;
    height: 40px;
    margin-top: 16px;
    border: 1px solid #c4cbd1;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    color: #b9bbb8;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    behavior: url(PIE.htc);
}
.verify:hover{
    cursor: pointer;
}
.btn{
    width: 350px;
    height: 44px;
    background-color: #39a6eb;
    margin-top: 30px;
    font-size: 18px;
    color: #fff;
}
.btn:hover{
    background-color: rgba(121,177,212,0.9);
}
.about{
    width: 350px;
    height: 26px;
    font-size: 14px;
    margin: 0 auto;
    margin-top: 46px;
}
.about>a{
    text-decoration: none;
    color: #4e6d99;
}
.about>a>span{
    width: 1px;
    height: 12px;
    display: inline-block;
    border: 1px solid #ccd2d0;
}
/*cont:2*/
.cont-2>.text{
    margin: 0 auto;
    width: 350px;
    height: 30px;
    font-size: 15px;
    display: inline-block;
    margin-top: 30px;
}
.cont-2>.text>a{
    text-decoration: none;
    color: #4174a9;
    font-weight: bold;
}
.cont-2>img{
    margin-top: 12px;
}
.contentbox>div{
    width: 450px;
    height: 355px;
    text-align: center;
    display: none;
    background-color: #e1f2fc;
}
.cont-2>.about{
    margin-top: 54px;
}
.contentbox>div[class="box active"]{
    display: block;
}
/*这是低端浏览器下placeholder的字体颜色*/
.cont-1>input{
    color: #bfbfbf;
}
/*这是firefox下placeholder的字体颜色*/
.cont-1>input::-moz-placeholder {
    color: #bfbfbf;
}
/*这是webkit下placeholder的字体颜色*/
.cont-1>input::-webkit-input-placeholder {
    color: #bfbfbf;
}
版权声明:本文为qq_39725309原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39725309/article/details/80623385

智能推荐

[java][事务]tcc事务实战学习过程

学习项目:https://github.com/14251104246/spring-cloud-rest-tcc 下载源码,进入源码目录运行:mvn clean package Docker Compose运行 docker-compose -f infrastructure-compose.yml up -d docker-compose -f basic-ms-compose.yml up ...

[学习记录,]Mybatis入门

环境: Eclipse 2019 Tomcat 9.0 jdk1.8 开搞 首先创建工程 结构如下 导入Jar包 可在mybatis官网下载 http://www.mybatis.cn/82.html 配置文件mybatis-config.xml 事务管理有两种:JDBC和MANAGED JDBC: MANAGED 数据源类型:UNPOOLED、POOLED、JNDI 创建实体类文件User.ja...

运用for语句来判断数组中值得大小

总结: 1将if语句与数组联合起来判断输入中各组中的最大最小值; 2注意:定义的数组数量是躲多少就要输入多少组数据,少输入就无法输出;...

Bridging signals

Bridging signals Time Limit: 1000MSMemory Limit: 10000K Total Submissions: 10926Accepted: 5982 Description 'Oh no, they've done it again', cries the chief designer at the Waferland chip factory. Once ...

一天一大 leet

一天一大 leet 题目(难度:困难): 示例 抛砖引玉 官方答案 高手在民间 菜鸡的自白 20200606 题目(难度:困难): 给定一个未排序的整数数组,找出最长连续序列的长度。 要求算法的时间复杂度为 O(n)。 示例 示例 抛砖引玉 要求算法的时间复杂度为 O(n),即限制了只能循环一次; 先对数组排序 循环数组记录后一个元素等于前一个元素+1或者等于前一个元素的数量 满足条件++,不然重...

猜你喜欢

Tensorflow实现的CNN文本分类

https://blog.csdn.net/somtian/article/details/69359498 原博文, github 在这篇文章中,我们将实现一个类似于Kim Yoon的卷积神经网络语句分类的模型。 本文提出的模型在一系列文本分类任务(如情感分析)中实现了良好的分类性能,并已成为新的文本分类架构的标准基准。 本文假设你已经熟悉了应用于NLP的卷积神经网络的基础知识。 如果没有,建议...

JDBC新手入门教程

开发工具:idea 数据库:mysql jar包:junit-4.10 mysql-connector-java-8.0.18 junit-4.10下载 mysql-connector-java-8.0.18下载 注意1:jdbc的驱动因为使用的是mysql-connector-java-8.0.18,所以为(“com.mysql.cj.jdbc.Driver”),而不是(...

Lua 排序 table.sort

    正如C#中有Array.Sort(),lua中也有自己的排序方法即table.sort(table,function)。     lua中的排序默认是从大到小的排序;     传入一个方法参数,可以使排序从小到大; 打印结果:  ...

SURF算法简述及Python标记SURF特征检测实践

目录 一、SURF算法 1.算法简介 2.SURF与SIFT的具体差异 二、Python代码实践 1.测试环境 2.测试代码 3.核心函数 4.测试结果 一、SURF算法 1.算法简介 SURF(Speeded-Up Robust Features)加速稳健特征,是一种稳健的局部特征点检测和描述算法。 SURF是对SIFT算法的改进,该算子在保持 SIFT 算子优良性能特点的基础上,同时解决了 S...

Selenium3自动化测试——19.读取数据文件

1. 实现目标 在测试与开发中,经常需要对文件进行各种读取操作。这里介绍针对txt、csv、xml、json文件的读取。 2. 读取TXT文件 2.1 user_info.txt文件 2.2 读取txt文件.py 2.3 实现结果 3. 读取csv文件 3.1 user_info.csv  这里要注意,csv文件本身打开是utf-8的,而不是乱码 3.2 读取csv文件.py 这里,针对...