取h2并添加到选项卡式界面中的下一个/上一个按钮

Question

我有以下代码，它基本上是试图抓取 h2 标题并将其添加到我的下一个和上一个按钮中：

 <a href="#" class="next-tab mover" rel="2">Next</a>
 <a href="#" class="prev-tab mover" rel="0">Previous</a>

每个选项卡的结构如下：

<div id="tabs-1">
    <h2>Title 1</h2>
    <p>content here</p> 
    <a href="#" class="next-tab mover" rel="1">Next</a>
</div>

这是我的 jsfiddle，我只是无法弄清楚如何让它工作，如果我将 rels 更改为从 1 而不是 0 开始，它工作得很好，但我们使用的是自动生成这个的 jquery ui，这意味着我们坚持下去。

http://jsfiddle.net/2y7cemyw/2/

Answer 1

Karl-Andre在上面的评论中回答：

你的意思是，像这样：jsfiddle.net/2y7cemyw/4

.HTML：

<div id="tabs-1">
     <h2>Title 1</h2>
    <p>content here</p> <a href="#" class="next-tab mover" rel="1">Next</a>
</div>
<div id="tabs-2">
     <h2>Title 2</h2>
    <p>content here</p> <a href="#" class="next-tab mover" rel="2">Next</a>
 <a href="#" class="prev-tab mover" rel="0">Previous</a>
</div>
<div id="tabs-3">
     <h2>Title 3</h2>
    <p>content here</p> <a href="#" class="prev-tab mover" rel="1">Previous</a>
</div>

.CSS：

#tabs-2, #tabs-3 {
    display:none;
}

Javascript：

$('.mover').each(function () {
    $(this).text($(this).text() + '(' + $('#tabs-' + (+$(this).attr('rel')+1)).find('h2').text() + ')');
});
$('.mover').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    $this.closest('div').hide();
    $('#tabs-' + (+$this.attr('rel')+1)).show();
});