Как менять class при нажатие на onclick?

Question

[santavits]

Есть форма с кнопками

<div class="tac">
            <ul class="serv-nav flex services-tab">
                <li><a id="18" onclick="filterRecords(this.id);" class="" >Instagram</a></li>
                <li><a id="23" onclick="filterRecords(this.id)" class="">YouTube</a></li>
                <li><a id="24" onclick="filterRecords(this.id)" class="">Вконтакте</a></li>
                <li><a id="25" onclick="filterRecords(this.id)" class="">Facebook</a></li>
                <li><a id="26" onclick="filterRecords(this.id)" class="">Телеграмм</a></li>
                <li><a id="27" onclick="filterRecords(this.id)" class="">Разное</a></li>
            </ul>
        </div>

Как при клике на каждую из них, сделать чтобы придавался класс active, а при нажатие на другую кнопку, чтобы класс у предыдущей пропадал

Пробовал сделать так

function filterRecords(id) {	
$(this).toggleClass('active');
};

но увы, результата нет

Answer 1

[Moses Fender]

function filterRecords(id) {	
    $('ul.services-tab li a').removeClass('active');
    $(this).toggleClass('active');
};

Comments

[santavits]

увы не срабатывает, версия jquery 3.3.1 если что стоит, пробовал поставить 1.9.1 результат тот же

[Moses Fender]

Вот поэтому всегда лучше писать на native.

document.addEventListener('click', function(ev){
    let _links = document.querySelectorAll('ul.services-tab li a');

    let clearActive = function(){
        [].map.call(_links, function(_link){
             _link.classList.remove('active');
        });
    };

    if(ev.target.closest('ul.services-tab') && ev.target instanceof HTMLAnchorElement){
        ev.preventDefault();
        clearActive();
        ev.target.classList.add('active');
    }
});

[santavits]

Moses Fender, Спасибо большое)

Answer 2

[leni_m]

function filterRecords(id) {	
    $('ul.services-tab li a').removeClass('active');
    $("#"+id).toggleClass('active');
};

Comments

[santavits]

увы не срабатывает, версия jquery 3.3.1 если что стоит

[leni_m]

santavits,

onclick="filterRecords(this.id)"

- this.id сомнительная запись,
напишите так хотя бы: onclick="filterRecords($(this).attr('id'))",
а вообще лучше не мешать html и js и написать так:

<div class="tac">
            <ul class="serv-nav flex services-tab">
                <li><a id="18" class="someClass">Instagram</a></li>
                <li><a id="23" class="someClass">YouTube</a></li>
                <li><a id="24" class="someClass">Вконтакте</a></li>
                <li><a id="25" class="someClass">Facebook</a></li>
                <li><a id="26" class="someClass">Телеграмм</a></li>
                <li><a id="27" class="someClass">Разное</a></li>
            </ul>
        </div>
<script>
    $(".someClass").on("click", function(){
        $('.someClass').removeClass('active'); //убираем со всех someClass класс active
        $(this).addClass('active'); // добавляем класс active к элементу по которому нажали
    })
</script>

если и так работать не будет, значит скрипт еще не знает о существовании jquery, и вы подключаете его где-то в конце.