在多个选项卡上将类添加到 last-child
addClass to last-child on multiple tab
我正在尝试构建一个脚本来更改关于我的选项卡的 "current" class。由于我的 if 函数有点棘手,它在单个页面中调用多个 <ul>
,因此我正在研究一种只影响最后一个 child 的方法。到目前为止,我的所有功能都在困扰着我
$(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');
它应该有效:)
我正在尝试构建一个脚本来更改关于我的选项卡的 "current" class。由于我的 if 函数有点棘手,它在单个页面中调用多个 <ul>
,因此我正在研究一种只影响最后一个 child 的方法。到目前为止,我的所有功能都在困扰着我
$(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');
它应该有效:)