Javascript JQuery步骤向导CSS或JQuery不工作_Javascript_Jquery_Html_Css

Javascript JQuery步骤向导CSS或JQuery不工作

javascript jquery html css

Javascript JQuery步骤向导CSS或JQuery不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用jquery步骤向导，但显然无法加载css，否则jquery和版本或标题中的顺序将出现问题 HTML标题： <head> <title>MY WIZARD STEP</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon"

我正在尝试使用jquery步骤向导，但显然无法加载css，否则jquery和版本或标题中的顺序将出现问题

HTML标题：

<head>
<title>MY WIZARD STEP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" href="resources/images/icon_hand.png" type="image/png" />


<!-- BOOSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">

<!-- Font & fa icon (Awesome) -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous">

<!-- Flatly Theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT"
      crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>


<!-- JQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- JQuery Steps (Wizard) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"
        integrity="sha256-yUWanhHkxj+3ow0qZE6AtzP8lZkwLvPagULL6PnZMz0="
        crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"
        integrity="sha256-VyFbbsL+4WS8IrWijL0olTxDKbsCymITRf7zwexscMc="
        crossorigin="anonymous"></script>


<!-- JQuery Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
        integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A="
        crossorigin="anonymous"></script>


<!-- Jquery Steps CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/jquery.steps.css">

<!-- Personal styles -->
<link rel="stylesheet" type="text/css" href="resources/css/style.css">


<!-- Personal JS -->
<script src="resources/js/register.js"></script>

我正在向ApacheTomcat9.0.0部署一个war文件，但看起来好像没有加载css或步骤js

在JSMiddle中，工作很好：

那么，这里的问题是什么

谢谢

为什么要添加两次jquery步骤

jquery.steps.js

和

jquery.steps.min.js

是一回事——一个是冗长的，另一个是最小化的。是的，我理解，这只是为了尝试。现在我刚刚添加了jquery.steps.js，仍然存在同样的问题。这不是浏览器缓存。我刚刚创建了JSFIDLE 0，如果我没有在框架中的JQuery javascript中进行选择，模板将不起作用，我将得到相同的错误。因此，当我在我的项目中复制它时，这在JSFIDLE中给出了解决方案？？脚本引用应该包含在head或body标记中？如果我没有在框架中选择JQuery，JSFIDLE也不工作。为什么要添加两次JQuery步骤

jquery.steps.js

和

jquery.steps.min.js

<div id="example-vertical">
<h3>Main Info</h3>
<section>
    <p>Proposal is a project idea that you bring together the Design Patterns as building blocks in order to solve a real life problem. Let's build one together!
        <br>
        <br> Name:
        <br>
        <input type="text" name="firstname">
        <br> Description:
        <br>
        <textarea name="Text1" cols="40" rows="5"></textarea>

    </p>
</section>
<h3>Sensors</h3>
<section>
    <p>If your design includes any sensor please select a design patterns that best suits. If you can not find the design pattern that you want to use send it to us. We can add it to our library.
        <br>
    </p>
</section>
<h3>Processing</h3>
<section>
    <p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Communications</h3>
<section>
    <p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>User Interface</h3>
<section>
    <p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Storage</h3>
<section>
    <p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Voltage</h3>
<section>
    <p>The next and previous buttons help you to navigate through your content.</p>
</section>
<h3>Physical</h3>
<section>
    <p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>

$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft"
});