Question

This is the fiddle。您可以看到，如果有人点击链接B，那么内容就会打开，如果点击C该内容打开，则隐藏上一个打开的内容，就像jQuery标签一样。现在，我希望Next和Previous按钮采取相同的操作。但是，我无法正确编写脚本。我尝试/得到错误/无法正确写入的方式：

$('body').on('click', '.next', function() {  
   var nextId = $('.div-link li.active').next().find('li a').attr('href');  // I don't understand how can I get the next id of opened div
   $('.div-link li' +nextId).addClass('active');  // I even can't imagine how can be set the active class at the li links
});

我不擅长jQuery。所以，请帮助我编写脚本，点击Next和Previous按钮。

Answer 1

快速而混乱的方式是：

$('.back').click(function(){
    $('.div-link .active').prev().children('a').click();
});

$('.next').click(function(){
    $('.div-link .active').next().children('a').click();
});

Demo

Answer 2

这是一个有效的jsFiddle，可供下一个和上一个按钮

参考

...  
$(document).ready(function(){
    $("#tabs").tabs();        
    $("#prevBtn").bind("click", prevOfferTab);
    $("#nextBtn").bind("click", nextOfferTab);
});
...

function nextOfferTab() {
    console.log('nxt');
    var newTabIndex = parseInt(getSelectedTabIndex(1));
    $('#tabs').tabs('select', newTabIndex);
}

function prevOfferTab() {
    var newTabIndex = parseInt(getSelectedTabIndex(-1));
    $('#tabs').tabs('select', newTabIndex);
}

如何处理Tab键内容类似的Next和Previous按钮

2 个答案: