jquery-steps <a href>触发标签

Question

我正在使用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/

谢谢!

Answer 1

根据文档,它似乎缺乏现在的功能:

/*  
 * 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!"); 
};

因为它并没有让你去的一个具体步骤,这里是你如何可以调用这些方法都从一个锚存在:

参见工作jsFiddle演示

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

a[id$=step]

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

$(this).attr("id").split("-")[0]

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