0

我正在开发一个新项目，并且 html 不允许我在同一个容器中拥有选项卡标题和内容。因此，我使用了 Jquery 及其第 n 个子选择器来启用和禁用每个选项卡。我在 jsfiddle http://jsfiddle.net/QdbdT/1/上整理了一个示例

这是javascript

$(".control-bar-nav-wrapper ul li:nth-child(1)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(1)").addClass("active").siblings().removeClass("active");
});
$(".control-bar-nav-wrapper ul li:nth-child(2)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(2)").addClass("active").siblings().removeClass("active");
});
$(".control-bar-nav-wrapper ul li:nth-child(3)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(3)").addClass("active").siblings().removeClass("active");
});
$(".control-bar-nav-wrapper ul li:nth-child(4)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(4)").addClass("active").siblings().removeClass("active");
});

这确实有效，但我不禁觉得可能有一种更有效的编码方式。我认为也许某种类型的索引会有所帮助，但我无法理解它。如果有人有任何想法，我将不胜感激，欢呼。

4

2 回答 2

4

您可以在示例中使用.index()和.eq()来实现相同的效果并组合所有功能

$(".control-bar-nav-wrapper ul li").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div").eq($(this).index()).addClass("active").siblings().removeClass("active");
});

小提琴

于 2013-01-03T17:01:09.917 回答
0

您可能需要考虑使用 adata attribute来允许您在单击的元素和容器元素之间进行映射。虽然，它看起来不是最优雅的，但它确实有助于可读性部门。

CSS

<li class="applications active" data-display='Applications'>
       <a href="#">Applications</a>
</li>
<li class="communities" data-display='Communities'>
       <a href="#">Communities</a>
</li>
<li class="friends" data-display='Friends'>
       <a href="#">Friends</a>
</li>
<li class="administration" data-display='Administration'>
        <a href="#">Administration</a>
</li>

jQuery

$('[data-display]').on('click',function()
{
      $('.slider-wrapper').removeClass('active');
      $('#' + $(this).attr('data-display')).addClass('active');                              
});​

例子

于 2013-01-03T17:01:57.197 回答