有人可以帮我吗,我在弄清楚如何为垂直菜单删除/添加事件类时遇到了麻烦?
HTML
<ul class="vertical__menu">
<li>
<a class="vertical__menu-item--active" href="#">Truck Route</a>
</li>
<li>
<a class="vertical__menu-item" href="#">Location Map</a>
</li>
<li>
<a class="vertical__menu-item" href="#">Major Retailers Map</a>
</li>
</ul>
CSS
.vertical__menu-item {
color: blue
}
.vertical__menu-item--active {
color: red
}
JQUERY
$(document).ready(function () {
$('ul.vertical__menu li a').click(function () {
$('vertical__menu-item').removeClass("--active");
$(this).addClass("--active");
});
});
最佳答案
您需要添加/删除类 .vertical__menu-item--active
,目前在您的代码中您正在删除不存在的类 --active
在你的CSS中。您也没有选择当前在您的 jquery 中的元素,并且您在标记的第一个列表项上缺少 .vertical__menu-item
因此当您尝试删除时它不会被选中.vertical__menu-item--active
类,检查下面的工作演示:
$(document).ready(function () {
$('.vertical__menu-item').click(function () {
$('.vertical__menu-item').removeClass("vertical__menu-item--active ");
$(this).addClass("vertical__menu-item--active ");
});
});
.vertical__menu-item {
color: blue
}
.vertical__menu-item--active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vertical__menu">
<li>
<a class="vertical__menu-item vertical__menu-item--active" href="#">Truck Route</a>
</li>
<li>
<a class="vertical__menu-item" href="#">Location Map</a>
</li>
<li>
<a class="vertical__menu-item" href="#">Major Retailers Map</a>
</li>
</ul>
关于jquery - 如何删除/添加事件类到 Jquery 中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49971770/