将类添加到ajax触发器

Question

我创建了一个简单的ajax加载内容，但它正在尝试更改“活动”类（它添加了一个边界底部以让用户知道他们正在查看哪个菜单）取决于哪个目标被点击。我试图使用jQuery，但无济于事。如果有人能帮助或指引我正确的方向，将不胜感激。

这是我的尝试：

 $(document).on('click', '.menu-tabs li a', function() { 
     $('.active').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }); 

HTML：

<div class="menu-tabs" id="menu-tabs"> 
    <ul> 
    <li class="active"><a href="#" data-target="food">FOOD</a></li> 
    <li class=""><a href="#" data-target="desserts">DESSERTS</a></li> 
    <li class=""><a href="#" data-target="drinks">DRINKS</a></li> 
    </ul> 
</div> 

<article class="menu-container" id="menu-container"> 
    <?php include('food.php'); ?> 
    </article> 

AJAX：

var trigger = $('#menu-tabs ul li a'), 
    container = `$('#menu-container'); 

trigger.on('click', function() { 

    var $this = $(this), 
     target = $this.data('target'); 

    container.load(target + '.php'); 

    return false; 
});` 

Answer 1

老实说，我只是结合了两个代码和它的工作

var trigger = $('#menu-tabs ul li a'), 
    container = $('#menu-container'); 

trigger.on('click', function() { 

    var $this = $(this), 
     target = $this.data('target'); 
    $('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 


    container.load(target + '.php'); 


    return false; 
}); 

Answer 2

请检查下面的代码段。主要来自你自己的代码。只需添加CSS进行检查，它似乎适用于我。至少导航正在改变点击“活跃”类。

$(document).on('click', '.menu-tabs li a', function() { 
 
    $('.active').removeClass('active'); 
 
    $(this).parent().addClass('active'); 
 
});

.active{ 
 
    background:green; 
 
} 
 
.active a{ 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="menu-tabs" id="menu-tabs"> 
 
    <ul> 
 
    <li class="active"><a href="#" data-target="food">FOOD</a></li> 
 
    <li class=""><a href="#" data-target="desserts">DESSERTS</a></li> 
 
    <li class=""><a href="#" data-target="drinks">DRINKS</a></li> 
 
    </ul> 
 
</div> 
 

 
<article class="menu-container" id="menu-container"> 
 
    <?php include('food.php'); ?> 
 
</article>