Jquery-Steps 插件不起作用？答案

【问题标题】：Jquery-Steps plug in not working?Jquery-Steps 插件不起作用？
【发布时间】：2015-08-01 03:32:28
【问题描述】：

我遇到了这个神奇的插件http://www.jquery-steps.com/Examples 我一直在努力让它发挥作用，但似乎我错过了一些东西。

我已添加对文件的引用：

<script src="../Scripts/jquery.steps.min.js" type="text/javascript"></script>

我的标记如下所示：

<div id="example-basic">
    <h3>Keyboard</h3>
    <section>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
    </section>
    <h3>Effects</h3>
    <section>
        <p>Wonderful transition effects.</p>
    </section>
    <h3>Pager</h3>
    <section>
        <p>The next and previous buttons help you to navigate through your content.</p>
    </section>
</div>

Javascript 看起来像这样：

<script type="text/javascript">
$("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});
</script>

【问题讨论】：

任何控制台错误？您是否包含了 jQuery 参考？尝试包装您的代码 inn DOM 就绪处理程序 $(function(){})
@ShaunakD TypeError: $(...).steps 不是函数
插件似乎没有加载。验证路径../Scripts/jquery.steps.min.js。另外，您在哪里包含 HTML 中的引用？
@ShaunakD 是的，我添加了 jquery-1.11.2.js 参考并尝试将 javascript 放入 dom 就绪
您在 HTML 部分的哪个部分包含 <script src="../Scripts/jquery.steps.min.js" type="text/javascript"></script> ？

标签： javascript jquery asp.net jquery-plugins

【解决方案1】：

你需要链接这个 CSS 文件，download it here

并在head标签中添加以下行

<link rel="stylesheet" href="../dist/css/jquery.steps.css"/>

【讨论】：

【解决方案2】：

我们必须使用最新的 jquery，因为这个插件使用 jquery 的 when 函数。这解决了我的问题。
http://code.jquery.com/jquery-2.1.4.js

【讨论】：

没有解决我的问题。它似乎在工作，但看起来很糟糕，好像缺少 css。
将链接添加到这个 css -> jquery-steps.com/Content/… 在你的文件中
那行得通。它似乎弄乱了我在页面上现有的 css。不过谢谢。

【解决方案3】：

您必须将最后一个脚本代码放在 body 标记的关闭之前，如下所示：

<body>
    <div id="steps">
        <h1>First Step</h1>
        <section>First Content</section>

        <h1>Second Step</h1>
        <section>Second Content</section>
    </div>
    <script>
    $("#steps").steps(
    {
      headerTag : "h1",
      bodyTag : "section",
      cssClass: "wizard"
    }
        );
  </script>
</body>

另外，这是一个必须就地的基本 css 文件：

<script src="./javascripts/jquery.steps.js"></script>

这可以在项目的 git hub 页面上找到。

【讨论】：