您好我正在尝试创建一个脚本,该脚本将在标记上添加活动类,并删除ul中的其他内容。
它现在有效,但是当我有多个导航时,它会切换它们。 那么我如何才能使它只针对当前的ul li项目?
我的工作示例代码:https://codepen.io/andrelange91/pen/JZOawY
我的Html:
<div class="row">
<div class="col-12">
<div class="smallNav activeNav">
<ul role="tablist" class="nav nav-pills nav-pills-primary">
<li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
<a data-toggle="tab" role="tablist" href="#undefined" class="nav-link active" aria-expanded="true">
Profile
</a>
</li>
<li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
<a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
Settings
</a>
</li>
<li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
<a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
Options
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="largeNav activeNav">
<ul role="tablist" class="nav nav-pills nav-pills-primary flex-column">
<li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
<a data-toggle="tab" role="tablist" href="#undefined" class="nav-link active" aria-expanded="true">
Profile
</a>
</li>
<li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
<a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
Settings
</a>
</li>
<li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
<a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
Options
</a>
</li>
</ul>
</div>
</div>
我正在处理的脚本:
$('.activeNav li a').click(function(e) {
e.preventDefault();
$('.activeNav ul').find('a').removeClass('active');
$(this).addClass('active');
});
答案 0 :(得分:1)
使用以下
Me.Cursor = Cursors.AppStarting