两个按钮切换展示内容同时切换

最新推荐文章于 2024-04-11 05:37:43 发布
最新推荐文章于 2024-04-11 05:37:43 发布
阅读量714 收藏
点赞数 1
分类专栏： 登录、注册 文章标签： web html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angelo_gs/article/details/87929428
版权

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8" />

<title>jQuery动画登录注册表单切换代码 - A5源码</title>

 

<script src="js/jquery-2.2.4.min.js"></script>

<script>

    $(document).ready(function() {

        

        $(".form").slideDown(500);

        

        $("#landing").addClass("border-btn");

 

        $("#registered").click(function() {

            $("#landing").removeClass("border-btn");

            $("#landing-content").hide(500);

            $(this).addClass("border-btn");

            $("#registered-content").show(500);

            

        })

 

        $("#landing").click(function() {

            $("#registered").removeClass("border-btn");

            $(this).addClass("border-btn");

            

            $("#landing-content").show(500);

            $("#registered-content").hide(500);

        })

    });

</script>

 

<style>

    * {

        margin: 0;

        padding: 0;

        font-family: "微软雅黑";

    }

    

    body {

        background: #F7F7F7;

    }

    

    .form {

        position: absolute;

        top: 50%;

        left: 50%;

        margin-left: -185px;

        margin-top: -210px;

        height: 420px;

        width: 340px;

        font-size: 18px;

        -webkit-box-shadow: 0px 0px 10px #A6A6A6;

        background: #fff;

    }

    

    .border-btn {

        border-bottom: 1px solid #ccc;

    }

    

    #landing,

    #registered {

        float: left;

        text-align: center;

        width: 170px;

        padding: 15px 0;

        color: #545454;

    }

    

    #landing-content {

        clear: both;

    }

    

    .inp {

        height: 30px;

        margin: 0 auto;

        margin-bottom: 30px;

        width: 200px;

    }

    

    .inp>input {

        text-align: center;

        height: 30px;

        width: 200px;

        margin: 0 auto;

        transition: all 0.3s ease-in-out;

    }

    

    .login {

        border: 1px solid #A6A6A6;

        color: #a6a6a6;

        height: 30px;

        width: 202px;

        text-align: center;

        font-size: 13.333333px;

        margin-left: 70px;

        line-height: 30px;

        margin-top: 30px;

        transition: all 0.3s ease-in-out;

    }

    

    .login:hover {

        background: #A6A6A6;

        color: #fff;

    }

    

    #bottom {

        margin-top: 30px;

        font-size: 13.333333px;

        color: #a6a6a6;

    }

    

    #registeredtxt {

        float: left;

        margin-left: 80px;

    }

    

    #forgotpassword {

        float: right;

        margin-right: 80px;

    }

    

    #photo {

        border-radius: 80px;

        border: 1px solid #ccc;

        height: 80px;

        width: 80px;

        margin: 0 auto;

        overflow: hidden;

        clear: both;

        margin-top: 30px;

        margin-bottom: 30px;

    }

    

    #photo>img:hover {

        -webkit-transform: rotateZ(360deg);

        -moz-transform: rotateZ(360deg);

        -o-transform: rotateZ(360deg);

        -ms-transform: rotateZ(360deg);

        transform: rotateZ(360deg);

    }

    

    #photo>img {

        height: 80px;

        width: 80px;

        -webkit-background-size: 220px 220px;

        border-radius: 60px;

        -webkit-transition: -webkit-transform 1s linear;

        -moz-transition: -moz-transform 1s linear;

        -o-transition: -o-transform 1s linear;

        -ms-transition: -ms-transform 1s linear;

    }

    

    

    #registered-content {

        margin-top: 40px;

        display: none;

    }

    

    .fix {

        clear: both;

    }

    .form{

        display: none;

    }

</style>

 

</head>

 

<body>

<div class="form">

    <div id="landing">登陆</div>

    <div id="registered">注册</div>

    <div class="fix"></div>

    <div id="landing-content">

        <div id="photo"><img src="img/photo.jpg" /></div>

        <div class="inp"><input type="text" placeholder="用户名" /></div>

        <div class="inp"><input type="password" placeholder="密码" /></div>

        <div class="login">登录</div>

        <div id="bottom"><span id="registeredtxt">立即注册</span><span id="forgotpassword">忘记密码</span></div>

    </div>

    <div id="registered-content">

        <div class="inp"><input type="text" placeholder="请输入用户名" /></div>

        <div class="inp"><input type="password" placeholder="请输入密码" /></div>

        <div class="inp"><input type="password" placeholder="请再次输入密码" /></div>

        <div class="inp"><input type="text" placeholder="电子邮箱" /></div>

        <div class="login">立即注册</div>

    </div>

</div>

</body>

</html>

 

angelo_gs
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VS2015+Qt5.7 两个按钮 切换循环显示图片
08-30
在本文中，我们将深入探讨如何使用VS2015与Qt5.7框架来创建一个简单的应用程序，该程序包含两个按钮，用于切换并循环显示图片。这个应用的主要目的是通过文件目录加载图片，并利用列表来管理这些图片的顺序。让我们...
CSS使用classList实现两个按钮样式的切换
09-27
这两个按钮分别带有`mya1`和`mya2`的类名，同时，它们都有一个点击事件（`onclick`），调用相应的JavaScript函数： ```html (0)" class="mya1" id="mya" onclick="myonclick()">注册 (0)" class="mya2" id="myaa...
HarmonyOS实现简易的页面跳转投票
qq_62637200的博客
12-05 525
用户进行注册，后跳转至注册成功的页面，接着进一步跳转至登录页面，登录完成后进入投票页面，投票页面中可以点击自己喜爱的图片进行点赞投票。 注册页面中需要进行填写的有用户名、密码、出生日期、性别，用户名中要求长度需要大于6但小于20，其他为长度不等于0即可。在点击注册时，程序会判断这些条件，不满足时会有弹窗提示，全部满足则会跳转至注册成功的页面。 在注册页面hml部分利用input组件设置属性text、password、radio分别实现用户名填写、密码填写、性别选择的功
两个按钮切换事件，且某一个按钮事件在页面开始加载就执行。
S852509769的博客
02-26 465
对每一个按钮定义一个按钮单击事件，即function1(),function2(), 使用jquery方式: &lt;script&gt;         $(function(){                    onclick1();          })         function onclick1();         function  onclick2();...
点击按钮切换div及其内容（两种方法：Vue指令方式，2024年最新前端项目实战案例
最新发布
2401_83621541的博客
04-11 1232
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
JQ实现点击两个按钮切换内容
weixin_30660027的博客
07-12 1297
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <script src="../js/jquer...
用 CSS3 实现切换按钮
qq_33003143的博客
07-21 924
记录CSS3实现切换按钮的思路。
浏览器兼容性问题2（持续更新中）
weixin_30664615的博客
12-28 836
1. HTML对象获取问题 FireFox：document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法：统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键字或...
使用classList来实现两个按钮样式的切换方法
08-28
下面小编就为大家分享一篇使用classList来实现两个按钮样式的切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
将两个div左右并列显示并实现点击标题切换内容
09-04
这样，我们就实现了两个div左右并列显示，点击标题可以切换内容的效果。这个方法可以扩展到多个选项卡，只需按照相同的模式添加更多的标题和内容即可。这种交互设计广泛应用于各种网页应用，如产品介绍、文档导航等...
Qt 两个窗口相互切换
07-06
通过以上步骤，我们成功地使用Qt的信号与槽机制实现了两个窗口之间的切换。这个简单示例展示了Qt框架的强大功能，以及它如何帮助开发者构建用户友好的图形界面应用程序。在实际项目中，你可以根据需求扩展这个概念，...
两个按钮切换的样式
weixin_45646663的博客
08-26 421
<span :class="activeCode == 1 ? 'tableBottomActive2' : 'tableBottomActive3'" @click="selectAll(1)"> 全选 </span> <span :class="activeCode == 2 ? 'tableBottomActive2' : 'tableBottomActive3'" @click="selectAll(2)"> 反选 </span> export
Android ToggleButton：状态切换的Button
weixin_34056162的博客
06-20 310
 Android ToggleButton：状态切换的Button Android ToggleButton和Android Button类似，但是ToggleButton提供了一种选择机制，可以表达Button处于何种状态，比如常见的WiFi打开或者关闭状态等等这种类似与非门的状态机。 标准的Android ToggleButton样式简单，如果要实现自定义的、表达力丰富的To...
html+css3+jquery 点击按钮切换内容
热门推荐
还是用“Hello World！”吧
08-14 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点击按钮切换内容&lt;/title&gt; &lt;style type="text/css"&gt;
一个按钮两个 事件切换执行
04-13
这是一个常见的前端问题，可以通过添加一个事件监听器来实现切换执行不同的功能。需要在代码中定义两个函数分别对应两个事件，然后在监听器中判断当前是哪一个事件，并决定执行哪一个函数。具体实现可以参考以下代码： ```javascript var button = document.getElementById("myButton"); var isEventA = true; function handleEventA() { // 执行事件 A 的功能 } function handleEventB() { // 执行事件 B 的功能 } button.addEventListener("click", function() { if (isEventA) { handleEventA(); } else { handleEventB(); } isEventA = !isEventA; }); ``` 这段代码中，我们定义了一个按钮，并添加了一个名为 "click" 的事件监听器。每次单击按钮时，监听器都会判断当前是哪个事件，并决定执行相应的函数。最后还需要切换事件，以便下一次单击按钮时执行另一个事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值