Question

我正在使用this jQuery Plugin在我正在处理的网站上展示一种“功能列表”。这个插件非常直接，有效地完成this demo显示的内容。

但是，我想在此实现一个功能。我希望能够在每个标签的内容区域中添加“上一个”和“下一个”链接，以切换到，上一组或下一组内容。

任何人都可以提供一些帮助，了解如何使用此jQuery插件实现此功能吗？

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

Answer 1

您只需添加调用.click()的previous/next个链接（相当于右侧标签元素上的.trigger('click')。

Demo →

标记，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插件，那么将此代码合并到插件中应该非常容易。我不确定你是想要一次性解决方案，还是想要改变插件本身。

jQuery插件 - 简单的功能帮助

1 个答案:

HTML

CSS

的JavaScript