jquery-steps触发标签

我正在使用 http://www.jquery-steps.com/Examples#basic作为在线测验工具,并且想知道是否可以使用链接或按钮触发我在粘贴的演示中看到的单击标签事件.

HTML：

<section id="basic">
    <h2 class="page-header">Basic Example</h2>
    <div id="wizard-1">
        <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>
</section>

JS：

$("#wizard-1").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});

如果您将标题/标签悬停,则会看到附加到它们的锚点.我想做的是调用锚点(即下面)并使用tab功能,就像我单击了选项卡本身一样.

<a href="#wizard-1-h-2">Step 3 or Pager</a>

JSFiddle：http://jsfiddle.net/fXF6k/1/

谢谢！

基于 documentation,它似乎缺乏现在的功能：

/*  
 * Sets a specific step object by index.  
 *  
 * @method setStep  
 * @param index {Integer} An integer that belongs to the position of a step  
 * @param step {Object} The step object to change  
 *
 */
$.fn.steps.setStep = function (index, step) 
{
    throw new Error("Not yet implemented!"); 
};

由于它还不允许您转到特定步骤,因此您可以在此处调用锚点中存在的方法：

See working jsFiddle demo

HTML

<a id="previous-step" href="#">Previous</a>
<a id="next-step" href="#">Next</a>

我用上面的替换你的锚标签.

JQUERY

var $wizard = $("#wizard-1");

$wizard.steps
({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});

$("a[id$=step]").on("click", function (e)
{
    e.preventDefault();
    $wizard.steps( $(this).attr("id").split("-")[0] );
});

JQUERY EXPLANATION

一个[ID $=工序]

选择id为以step结尾的所有锚标签.

$(这).attr( “ID”)分割( “ – ”)[0]

从单击的锚标记中拉出id,将字符串拆分为 – 并返回第一个部分,上一个或下一个,最后是传递到steps插件以触发相应的上一个或下一个方法所需的字符串.