使用jQuery重新排序标签

Question

我希望使用jQuery在我的主页上重新排列一组三个内容选项卡。

我已经弄清楚了如何重新排列选项卡导航按钮，但是容纳内容显示面板的div仍显示旧的选项卡订单内容。

代码如下：

<div class="tabs-content">
<section class="content active" id="panel0">

我的jQuery看起来像这样：

$(".tabs-content > section #panel0").removeClass("active");
$(".tabs-content > section #panel2").addClass("active");

但是，这不起作用，我知道这是针对部分html标签的ID的问题。 我已经检查了jquery网站，但找不到解决方案。

大家有帮助吗？

Answer 1

假设您的标签是连续的，则可以执行以下操作。

$('.tabs-navigation a').click(function() {
    var index = $(this).index();
    $('.tabs-content > section').removeClass('active');
    $('.tabs-content > section').slice(index,index).addClass('active');
});

这也假设您已经在css中正确定义了该类：

.tabs-content > section { display: none; }
.tabs-content > section.active { display: block; }

我想消除这些假设，但是您没有给我们太多帮助。