Question

我正在尝试开发一个非常简单的jquery选项卡，我可以灵活地在页面中添加多个选项卡内容区域。我可以使一个标签工作..但当我试图使它更通用我说我将通过命名像container_1，container_2等等的类来增加包装器来增加内容的数量

到目前为止，我所拥有的这一点显而易见，因为它可能无法正常工作

    $('<li class="spacer"></li>').insertAfter('.tabs li');
$('.tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();

for (var i = 0; i <= 20; i++) {
    $('.container_[i] .tabs li a').click(function () {
        var title = $(this).attr('id');
        if ($(this).hasClass('inactive')) {
            $('.tabs li a').addClass('inactive');
            $(this).removeClass('inactive');

            $('.container').hide();
            $('#' + title + 'Content').show();
        }
    });
}

这是我的标记

<div class="container_1">
    <ul class="tabs">
        <li><a id="tab1">soum</a>

        </li>
        <li><a id="tab2">sherry</a>

        </li>
        <li><a id="tab3">neighbor cat</a>

        </li>
    </ul>
    <div class="container" id="tab1Content">Soum's content</div>
    <div class="container" id="tab2Content">Sherry's content</div>
    <div class="container" id="tab3Content">neighbor cat's content</div>
</div>
<div class="container_2">
    <ul class="tabs">
        <li><a id="tab1">Freddy</a>

        </li>
        <li><a id="tab2">Teddy</a>

        </li>
        <li><a id="tab3">Brady</a>

        </li>
    </ul>
    <div class="container" id="tab4Content">Freddy's content</div>
    <div class="container" id="tab5Content">Teddy's content</div>
    <div class="container" id="tab6Content">Brady's content</div>
</div>

这是我的小提琴 http://jsfiddle.net/sghoush1/LF4rp/17/

Answer 1

你过度复杂化了。使用此设置，您实际上可以让内容div使用类而不是id但我没有更改该部分，因为我认为您可能正在使用ID

http://jsfiddle.net/LF4rp/18/

$('.containers .tabs li a').click(function () {
    var title = $(this).attr('id');
    var parent = $(this).closest('.containers');
    parent.find('.active').removeClass('active');
    $(this).addClass('active');
    parent.find('#' + title + 'Content').addClass('active');
});

HTML

<div class="container_1 containers">
    <ul class="tabs">
        <li><a id="tab1">soum</a>
        </li>
        <li><a id="tab2">sherry</a>
        </li>
        <li><a id="tab3">neighbor cat</a>
        </li>
    </ul>
    <div class="container" id="tab1Content">Soum's content</div>
    <div class="container" id="tab2Content">Sherry's content</div>
    <div class="container" id="tab3Content">neighbor cat's content</div>
</div>
<div class="container_2 containers">
    <ul class="tabs">
        <li><a id="tab4">Freddy</a>
        </li>
        <li><a id="tab5">Teddy</a>
        </li>
        <li><a id="tab6">Brady</a>
        </li>
    </ul>
    <div class="container" id="tab4Content">Freddy's content</div>
    <div class="container" id="tab5Content">Teddy's content</div>
    <div class="container" id="tab6Content">Brady's content</div>
</div>

CSS

.container {
    display: none;
}
.container.active {
    display: block;
}

用你可以做的jquery打开容器

$('.containers .tabs li:first-child a').addClass('active');
$('.containers').each(function() {
    $(this).find('.container:first').addClass('active');
});

http://jsfiddle.net/LF4rp/19/

页面中的多个标签内容区域

1 个答案: