Javascript 实现多窗体的步进器_Javascript_Html_Css

Javascript 实现多窗体的步进器

javascript html css

Javascript 实现多窗体的步进器,javascript,html,css,Javascript,Html,Css,我正在使用github包中的Materialize stepper-。我正在应用所有需要的链接，但出于某种原因，布局看起来应该如此。我甚至在文件中添加css内容。例如，这是用户提供的代码笔链接- 下面是我的代码，完全相同。我做错了什么 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

我正在使用github包中的Materialize stepper-。我正在应用所有需要的链接，但出于某种原因，布局看起来应该如此。我甚至在文件中添加css内容。例如，这是用户提供的代码笔链接-

下面是我的代码，完全相同。我做错了什么

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="mstepper.css" />
    <script type="text/javascript" src="mstepper.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<style>
    .btn,
    .btn-large,
    .btn-small,
    .btn-flat {
        border-radius: 4px;
        font-weight: 500;
    }

    .card:hover {
        box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.18);
    }

    .card {
        border-radius: 15px;
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.15);
    }
</style>

<body>
    <div class="section grey lighten-5">
        <div class="container">
            <div class="row">
                <div class="col xl4 l6 m10 s12 offset-xl4 offset-l3 offset-m1">
                    <h3 class="light center-align blue-text">Sign up form</h3>
                    <div class="card">
                        <div class="card-content">

                            <ul data-method="GET" class="stepper linear">
                                <li class="step active">
                                    <div class="step-title waves-effect waves-dark">E-mail</div>
                                    <div class="step-content">
                                        <div class="row">
                                            <div class="input-field col s12">
                                                <input id="email" name="email" type="email" class="validate" required>
                                                <label for="email">Your e-mail</label>
                                            </div>
                                        </div>
                                        <div class="step-actions">
                                            <button class="waves-effect waves-dark btn blue next-step"
                                                data-feedback="anyThing">Continue</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="step">
                                    <div class="step-title waves-effect waves-dark">Step 2</div>
                                    <div class="step-content">
                                        <div class="row">
                                            <div class="input-field col s12">
                                                <input id="password" name="password" type="password" class="validate"
                                                    required>
                                                <label for="password">Your password</label>
                                            </div>
                                        </div>
                                        <div class="step-actions">
                                            <button class="waves-effect waves-dark btn blue next-step">CONTINUE</button>
                                            <button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="step">
                                    <div class="step-title waves-effect waves-dark">Callback</div>
                                    <div class="step-content">
                                        End!!!!!
                                        <div class="step-actions">
                                            <button class="waves-effect waves-dark btn blue next-step"
                                                data-feedback="noThing">ENDLESS CALLBACK!</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<script>
    $(document).ready(function () {
        function anyThing(destroyFeedback) {
            setTimeout(function () { destroyFeedback(true); }, 1500);
        }

        function noThing(destroyFeedback) {
            setTimeout(function () { destroyFeedback(true); }, 10000);
        }

        var stepperDiv = document.querySelector('.stepper');
        console.log(stepperDiv);
        var stepper = new MStepper(stepperDiv);

    });
</script>


.btn，
.btn大型，
.btn小型，
.btn单位{
边界半径：4px；
字号：500；
}
.卡：悬停{
盒影：0px 10px 35px 0px rgba（0,0,0,0.18）；
}
.卡片{
边界半径：15px；
盒影：0px 5px 25px 0px rgba（0,0,0,0.15）；
}
报名表


电子邮件
你的电子邮件
继续


步骤2
你的密码
继续
返回


回拨
结束！！！！！
没完没了的回电！


$（文档）.ready（函数（）{
任何功能（反馈）{
setTimeout（函数（）{destroyFeedback（true）；}，1500）；
}
无功能（破坏性反馈）{
setTimeout（函数（）{destroyFeedback（true）；}，10000）；
}
var stepperDiv=document.querySelector（'.stepper'）；
控制台日志（stepperDiv）；
var stepper=新的MStepper（stepperDiv）；
});

您似乎缺少主要的

物化依赖项：
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js


function anyThing（破坏性反馈）{
setTimeout（函数（）{
反馈（正确）；
}, 1500);
}
无功能（破坏性反馈）{
setTimeout（函数（）{
反馈（正确）；
}, 10000);
}
var stepperDiv=document.querySelector（'.stepper'）；
控制台日志（stepperDiv）；
var stepper=新的MStepper（stepperDiv）
.btn，
.btn大型，
.btn小型，
.btn单位{
边界半径：4px；
字号：500；
}
.卡：悬停{
盒影：0px 10px 35px 0px rgba（0,0,0,0.18）；
}
.卡片{
边界半径：15px；
盒影：0px 5px 25px 0px rgba（0,0,0,0.15）；
}

报名表


电子邮件
你的电子邮件
继续


步骤2
你的密码
继续
返回


回拨
结束！！！！！
没完没了的回电！