Question

我正在尝试使用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>

身体：

<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>

CSS jquery.steps.css：

https://github.com/rstaib/jquery-steps/blob/master/demo/css/jquery.steps.css

并注册.js：

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

我正在将一个war文件部署到Apache Tomcat 9.0.0，但看起来没有加载css或步骤js

在jsfiddle工作正常： https://jsfiddle.net/yf1q3scc/62/

那么，这里有什么问题？

谢谢！

JQuery Steps Wizard CSS或JQuery无法正常工作

0 个答案: