Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将类添加到多个选项卡上的最后一个子级_Javascript_Jquery_Jquery Selectors - Fatal编程技术网

Javascript 将类添加到多个选项卡上的最后一个子级

Javascript 将类添加到多个选项卡上的最后一个子级,javascript,jquery,jquery-selectors,Javascript,Jquery,Jquery Selectors,我正在尝试构建一个脚本来更改有关选项卡的“当前”类。由于我的if函数有点棘手,它在一个页面中调用多个,因此我正在研究一种只影响最后一个孩子的方法。到目前为止,我得到的功能工作,所有困扰我的是 $(this).addClass('current'); $("#" + tab_id).addClass('current'); 我根本找不到添加ul:last child <script> $(document).ready(function(){ $('ul.

我正在尝试构建一个脚本来更改有关选项卡的“当前”类。由于我的if函数有点棘手,它在一个页面中调用多个
,因此我正在研究一种只影响最后一个孩子的方法。到目前为止,我得到的功能工作,所有困扰我的是

 $(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>

$(文档).ready(函数(){
$('ul.tabs:last child li')。单击(函数(){
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');
});
});
这是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');

它应该可以工作:)

您在错误的元素上调用了
最后一个子元素。改为在
  • 上调用它。li:last child
    很遗憾,我的if函数调用了多个ul,因此我必须将所有内容重新路由到调用到页面的最后一个ul。您的代码在这里似乎工作正常:。问题是您认为没有调用最后一个
    ?在这种情况下,在其他地方会有一个bug阻止它正常工作。请创建一个JSFIDLE来尝试重新创建错误非常感谢,您救了我,问题是$(“#”+tab_id).addClass('current');更改为$(this.next().addClass('current');非常感谢你的帮助:)不客气!如果我将此作为答复,请您接受。所以其他人可以从中学习