我正在尝试更新导航选项卡的活动状态。当标签被点击时 (newActive) 假设获得类 .active
并且前一个活动标签 (oldActive) 需要松开它。
到目前为止,我能够从 oldActive 中删除活动类,我还尝试向它添加一个类并且工作正常,但是我无法对 newActive< 进行任何更改/strong> 当我将其定义为 $(this)
或将其定义为 event.currentTarget
时。
我也没有在控制台中收到任何错误,因此我无法了解正在发生的事情。
JQuery 代码:
$('.navigation_tabs li').click( event => {
let oldActive = $('.navigation_tabs li.active');
let newActive = event.currentTarget;
oldActive.removeClass("active");
// this line is not working nor giving any errors
newActive.addClass("active");
loadContent(data[newActive.dataset.list]);
});
HTML 导航标记:
<div class="navigation">
<ul class="navigation_tabs">
<li class="active" data-list="build">Build</li>
<li data-list="plan">Plan</li>
<li data-list="innovate">Innovate</li>
<li data-list="interact">Interact</li>
<li data-list="scale">Scale</li>
<li data-list="service">Service</li>
<li data-list="enhance">Enhance</li>
<li data-list="general">General</li>
</ul>
</div>
答案 0 :(得分:1)
实际上有一个非常简单的例子。你为什么选择困难的? event.currentTarget 的使用适用于 ES6。不适用于 jquery。
$('.navigation_tabs li').click(function() {
$(this).addClass('active').after(function() {
$('.active').not($(this)).removeClass('active')
});
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<ul class="navigation_tabs">
<li class="active" data-list="build">Build</li>
<li data-list="plan">Plan</li>
<li data-list="innovate">Innovate</li>
<li data-list="interact">Interact</li>
<li data-list="scale">Scale</li>
<li data-list="service">Service</li>
<li data-list="enhance">Enhance</li>
<li data-list="general">General</li>
</ul>
</div>
答案 1 :(得分:0)
addClass
是一个 JQuery 函数,但 event.currentTarget
是一个普通的 javascript 事件,所以你可以试试这个:
$('.navigation_tabs li').click( event => {
let oldActive = $('.navigation_tabs li.active');
let newActive = $(event.currentTarget); // change here
oldActive.removeClass("active");
// this line is now working
newActive.addClass("active");
loadContent(data[newActive.dataset.list]);
});