yalaia yalaia -3 years ago 72
Ajax Question

add class to ajax trigger

I've created a simple ajax loading content which works but I'm trying to change the class 'active' (it adds a border-bottom to let the user know which menu they are looking at) depending on which target has been clicked. I've attempted using jquery but to no avail. If someone could help or point me in the right direction it would be greatly appreciated.

This is my attempt:

$(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 Source

I honestly just combined the two codes and it worked

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;
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download