jQuery插件-简单功能帮助

Question

我正在使用此jQuery插件在我正在工作的网站上显示某种“功能列表”。 这个插件非常简单，可以有效地完成本演示所显示的内容。

但是，我想在其中实现一项功能。 我希望能够在每个选项卡的内容区域中放置“上一个”和“下一个”链接，以切换到上一组或下一组内容。

任何人都可以在使用该jQuery插件实现该功能时应提供的帮助方面提供一些帮助吗？

非常感谢您可能提供的任何帮助...

Answer 1

您只需要在右侧选项卡元素上添加调用.click() （等效于.trigger('click')上previous/next链接。

演示→

标记，CSS和JS与问题中链接的演示相同，除了以下内容：

的HTML

<div id="content">
    <!-- snip, no changes here -->
    <span id="featureNav">
        <a id="prev">&lt; prev</a>
        |
        <a id="next" href="javascript:;">next &gt;</a>
    </span>
</div>

的CSS

#content {
    position: relative;
}

#featureNav {
    position: absolute;
    bottom: 0;
    right: 0; 
}

的JavaScript

$('#prev').click(function ()
{
    var $current = $('#tabs li a.current'),
        $prev = $current.parent().prev();

    if (!$prev.length)
    {
        $prev = $current.parent().siblings(':last');
    }

    $prev.find('a').click();
});

$('#next').click(function ()
{
    var $current = $('#tabs li a.current'),
        $next = $current.parent().next();

    if (!$next.length)
    {
        $next = $current.parent().siblings(':first');
    }

    $next.find('a').click();
});

如果您了解jQuery插件的编写方式，那么很容易将此代码合并到插件中。 我不确定您是否想要一次性解决方案，还是要更改插件本身。