jquery-steps 触发选项卡

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
});

如果您将鼠标悬停在标题/选项卡上，您将看到附加到它们的 anchor 。我想做的是调用 anchor (即下面)并具有选项卡功能，就像我单击了选项卡本身一样。

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

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

谢谢!

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

<小时/>

由于它还不允许您转到特定步骤，因此您可以通过以下方式调用 anchor 中确实存在的方法:

See working jsFiddle demo

<小时/>

HTML

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

我用上面的内容替换了您的 anchor 标记。

<小时/>

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 说明

a[id$=step]

选择 id 以 step 结尾的所有 anchor 标记。

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

从单击的 anchor 标记中提取 id，在 - 上分割字符串并返回第一部分，上一个 或 下一个，结束up 是传递到 steps 插件以触发相应的上一个或下一个方法所需的字符串。