Question

我正在尝试构建一个脚本来更改＆＃34;当前＆＃34;关于我的标签的课程。由于我的if函数有点棘手，因此它在单个页面中调用多个<ul>，这样我就可以在影响最后一个子节点的方式上工作。到目前为止，我的功能正在工作，困扰我的是

 $(this).addClass('current');
 $("#" + tab_id).addClass('current');

我根本找不到添加ul:last-child

的方法

<script>
    $(document).ready(function(){
        $('ul.tabs:last-child li').click(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs:last-child li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        });
    });
</script>

这是html

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <div id="tab-1" class="tab-content current">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <div id="tab-2" class="tab-content">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <div id="tab-3" class="tab-content">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
    <div id="tab-4" class="tab-content">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</ul>

Answer 1

变化：

$("#" + tab_id).addClass('current');

...到...

$(this).next().addClass('current');

它应该有效：）

addClass到多个选项卡上的last-child

1 个答案: