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

addClass to last-child on multiple tab

本文关键字：选项 last-child addClass      更新时间：2023-09-26

我正在尝试构建一个脚本来更改关于我的选项卡的"当前"类。因为我的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>

变化:

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

……

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

它应该可以工作:)

相关文章：