我是StackOverflow的新手,我想问问是否有人可以帮助我修复我的代码。我无法使SmartWizard jQuery 4正常工作。我绝对复制了每一行代码(css和js文件的源除外),但仍然无法正常工作。很抱歉,但是我不知道出什么问题了,我只是编码方面的新手,希望您能帮助我理解这个小问题。

我将在此处附加我的源代码和图像。

我希望复制的来自Jquery SmartWizard的代码来自http://techlaboratory.net/smartwizard。下载Zip文件并在zip文件的examples文件夹下打开index.html文件。

这是我要复制的代码的输出:
Output of the code I wish to copy

这是我的源代码。

<!DOCTYPE html>
<html>
<head>
     <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- Only difference is i'm using Bootstrap 4 -->
      <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"/>

  <link href="/sample2/resources/css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
  <link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
  <link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
  <link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

 //the same as the code in index

 <script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>

</body>
</html>

这是我的项目文件夹体系结构:project folder architecture

这是我的代码的输出:My output

再次抱歉,我只是编码方面的新手,感谢您回答我的问题。

编辑:我刚刚发现Jquery SmartWizard 4不兼容/不能根据评论与Bootstrap 4配合使用,但是有人使其使用了,正如评论者所说:“修改后它可以使用。我仍然要解决一些小问题。谢谢”。有人知道如何使Jquery SmartWizard 4与Bootstrap 4一起使用吗?非常感谢!

EDIT2:我现在使其与Bootstrap 4兼容,这是我所做的:

更改了以下代码行:

从:<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
  • 使用此语法,它将获取此版本的SmartWizard Jquery SmartWizard 4.2.2 is being fetched.

  • 至:<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
  • 使用这种语法,它将获取SmartWizard的最新版本。Jquery SmartWizard 4.3.1 is being fetched.

  • 现在我的问题是,额外的斜杠如何影响SmartWizard的版本获取方式,我很想知道为什么。非常感谢!但是现在我可以使Jquery SmartWizard 4.3.1与Bootstrap一起使用。

    最佳答案

    为了使Jquery SmartWizard 4与Bootstrap 4一起使用,我必须更改代码行

    从:

    <script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
    

    至:
    <script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
    

    我对css文件做了同样的操作,所以现在看起来像这样
    <link href="/sample2/resources//css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
    

    自从我使用缩略版本以来,就使用缩略版本,但是链接的语法是“/sample2/resources/css/smart_wizard.min.css”,该文档将获取SmartWizard v4.x版本。我绝对不知道为什么会这样,在资源更改正在使用的版本后在其中添加一个额外的斜杠,因此,如果有人可以提供答案,那将是很棒的!非常感谢!干杯!

    关于javascript - 我无法使SmartWizard Jquery 4与Bootstrap 4一起使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49233682/

    10-09 18:08