span的小问题

最新推荐文章于 2022-12-16 14:33:07 发布

u010565244

最新推荐文章于 2022-12-16 14:33:07 发布

阅读量625

点赞数

分类专栏：杂七杂八的问题 JS以及JQ

本文链接：https://blog.csdn.net/u010565244/article/details/44117563

版权

杂七杂八的问题同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS以及JQ

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Matrix Admin</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="../css/matrix-login.css"/>
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="loginbox">
    <form id="loginform" class="form-vertical" action="index.html">
        <div class="control-group normal_text">
            <h3>
                <img src="img/logo.png" alt="Log"/>
            </h3>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_ly"><i class="icon-lock"></i></span><input type="password"
                                                                                      placeholder="Password"/>
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_ly"><i class="icon-lock"></i></span>
                    <input type="password"
                                                                                      placeholder="用户名"/>
                </div>
            </div>
        </div>

        <div class="form-actions">
                <span class="pull-left">
                    <a href="#" class="flip-link btn btn-info" id="to-recover">forget password</a>
                </span>
                <span class="pull-right">
                    <a type="submit" href="index.html" class="btn btn-success">login</a>
                </span>
        </div>
    </form>


    <form id="recoverform" action="#" class="form-vertical" style="display:none">
        <p class="normal_text">
            please enter you email
        </p>

        <div class="controls">
            <div class="main_input_box">
                    <span class="add-on bk_lo">
                        <i class="icon-envelope"></i>
                    </span>

                <input type="text" placeholder="邮箱地址"/>
            </div>

        </div>

    </form>
</div>

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

    $(document).ready(function () {

        var login = $('#loginform');
        var recover = $('#recoverform');
        var speed = 400;

        $('#to-recover').click(function () {

            $("#loginform").slideUp();
            $("#recoverform").fadeIn();
        });
        $('#to-login').click(function () {

            $("#recoverform").hide();
            $("#loginform").fadeIn();
        });


        $('#to-login').click(function () {
            //为什么这里有两个click
        });

        if ($.browser.msie == true && $.browser.version.slice(0, 3) < 10) {
            $('input[placeholder]').each(function () {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function () {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function () {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });


        }
    });
</script>
</body>
</html>

显示的图像结果为：