如何包含jquery步骤插件

时间:2014-12-18 19:06:54

标签: javascript jquery html jquery-steps

我一直在尝试运行一个基本的jQuery步骤示例,但是无法执行此操作。这段代码有问题吗? jquery.steps.js插件与html doc

位于同一文件夹中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<script src="jquery.steps.js"></script>
</head>
<body>
<script>
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});


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



</body>
</html>

1 个答案:

答案 0 :(得分:0)

因为您在页面上呈现元素之前运行代码。

将脚本块移到页面上的元素之后,或者将内容包装在document ready中。

$(function() {  //shortcut for document ready
    $("#example-basic").steps({
        ...
    });
});