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

基于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

a[id$=step]

选择ID为step的所有锚标记。

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

从点击的锚标记中提取id，将字符串拆分为-并返回第一部分previous或next，这最终成为传递到steps插件可以触发相应的上一个或下一个方法。

Answer 2

我找到了一种更简单的解决方法。只要您知道要显示的步骤，就可以使用此jquery函数进行单击

$("#Donation-t-2").get(0).click();

此示例将显示步骤

中的第三张幻灯片

jquery-steps <a href=""> triggering tabs</a>

2 个答案:

See working jsFiddle demo

HTML

JQUERY

JQUERY EXPLANATION