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开始而不是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();
});

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

1 个答案: