Javascript jquery如何删除类？

我有以下jQuery：

<script type="text/javascript">
$('.showFood').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
$('.showFood').first().click();
</script>

$（'showFood'）。在（'click'，函数（）{
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
$（'.targetFood'）.hide（）；
$（'#food'+$（this）.data（'target'））.show（function（）{
$（“#食物”+$（this）.data（'target'））.toggle（“幻灯片”）；
});
});
$（'.showFood'）。首先（）。单击（）；

以下HTML：

<ul class="menus-nav">
<li><a href="#menu1" class="showFood" data-target="1">Menu 1</a></li>
<li><a href="#menu2" class="showFood" data-target="2">Menu 2</a></li>
<li><a href="#menu3" class="showFood" data-target="3">Menu 3</a></li>
</ul>
<div id="food1" class="targetFood">
<p>Items from menu 1</p>
</div>

<div id="food2" class="targetFood">
<p>Items from menu 2</p>
</div>

<div id="food3" class="targetFood">
<p>Items from menu 3</p>
</div>

菜单1中的项目

菜单2中的项目

菜单3中的项目

一切正常，除了在菜单中导航时，它不会删除选定的类，并且一旦单击所有菜单，它们都会选中该类

我在javascript或jquery方面没有很好的经验，你们中的一些人能给我一些帮助吗

注意：为了演示的目的，html已经减少了

---

如果您有jQuery 1.7+，您可能应该

更改：

$('.showFood').on('click', function () {
    //YOUR CODES HERE
})

到

---

这行代码可能是您的问题：

$(this).addClass('selected').siblings().removeClass('selected');

您可能希望先删除类，然后将其添加到选定元素：

$('.selected').removeClass('selected'); // remove all current selections
$(this).addClass('selected')            // select this element

你可以试试

$('.showFood').on('click', function () {
$('.showFood').removeClass('selected');// here remove class selected from all showfood
    $(this).addClass('selected');// here apply selected class on clickable showfood
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});

使用

---

使用

非

而不是

同级

$(this).addClass('selected');
$(".showFood").not(this).removeClass('selected');

您也可以使用

最近的

$(this)
   .addClass('selected').closest('ul')
   .find('a').not(this).removeClass('selected');

$(this).addClass('selected');
$(".showFood").not(this).removeClass('selected');

$(this)
   .addClass('selected').closest('ul')
   .find('a').not(this).removeClass('selected');