Question

我遇到了这个神奇的插件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>

Answer 1

您需要关联此CSS文件download it here

并在head代码

中添加以下行

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

Answer 2

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

Answer 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页面上找到。

Jquery-Steps插件不工作？

3 个答案: