Question

我如何给每个，一个活动的和当前的类用css样式，所以onclick我得到一个活动状态，onload我得到一个当前类添加。因此，每个集合同时都会将当前类添加到已加载的div.toggle中，并且当您选择到另一个时添加一个活动类

jsfiddle - http://jsfiddle.net/ZM9dL/534/

我尝试了这个，它添加了一个活动类，但它只显示您正在查看的一组标签的活动状态，并删除另一组的活动类

var selector = '.tabbed-reports li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

这是html

<ul class="tabbed-reports">
    <li class="toggle1">One</li>
    <li class="toggle2">Two</li>
    <li class="toggle3">Three</li>
    <li class="toggle4">Four</li>
    <li class="toggle5">Five</li>
</ul>

<div class="reports-content">
    <div class="toggle1"><li class="remove">remove</li>Here are the contents of 1..</div>
    <div class="toggle2" style="display:none;"><li class="remove">remove</li>Here are the contents of 2..</div>
    <div class="toggle3" style="display:none;"><li class="remove">remove</li>Here are the contents of 3...</div>
    <div class="toggle4" style="display:none;"><li class="remove">remove</li>Here are the contents of 4....</div>
    <div class="toggle5" style="display:none;"><li class="remove">remove</li>Here are the contents of 5.....</div>
</div>

<ul class="tabbed-reports">
    <li class="toggle11">One</li>
    <li class="toggle12">Two</li>
    <li class="toggle13">Three</li>
    <li class="toggle14">Four</li>
    <li class="toggle15">Five</li>
</ul>

<div class="reports-content">
    <div class="toggle11"><li class="remove">remove</li>Here are the contents of 11..</div>
    <div class="toggle12" style="display:none;"><li class="remove">remove</li>Here are the contents of 12..</div>
    <div class="toggle13" style="display:none;"><li class="remove">remove</li>Here are the contents of 13...</div>
    <div class="toggle14" style="display:none;"><li class="remove">remove</li>Here are the contents of 14....</div>
    <div class="toggle15" style="display:none;"><li class="remove">remove</li>Here are the contents of 15.....</div>
</div>


$('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().siblings().hide();
});

Answer 1

您需要将current类添加到在页面加载时显示默认内容的选项卡，在本例中为toggle1和toggle11

这就是你的js应该是这样的。

var selector = '.tabbed-reports li';

$(selector).on('click', function() {
    $(this).siblings().removeClass('active');

    var className = $(this).attr('class').replace('current', '');

    console.log($(this).parent().next('.reports-content'));
    $(this).parent().next('.reports-content').find('div').hide();

    $('.reports-content').find('.' + className).toggle();

    $(this).toggleClass('active');

});

这是一个有效的 JSFIDDLE

添加活动和当前状态类

1 个答案: