Вопросы Теги

Применение другого класса CSS при клике с помощью jQuery

В настоящее время я устанавливаю сайт WordPress, используя этот шаблон от ThemeForest, и вот живой просмотр того, над чем я сейчас работаю (который сейчас должен работать - пожалуйста, дайте мне знать, если он не работает).

Я настроил CSS так, чтобы левая граница при наведении была светло-серого цвета. Затем, когда ссылка была нажата, левая граница стала синего цвета, который я выбрал.

Как показано ниже, основная проблема с навигацией заключается в CSS. К ссылке Portfolio (раздел Portfolio на рисунке) по-прежнему применяется выбранный класс, а также внутренний элемент неупорядоченного списка. Я бы хотел, чтобы это выглядело как в разделе "Блог" на рисунке, где ссылка "Блог" больше не применяет выбранный класс.

Я спросил у создателя шаблона, почему так происходит; его ответ был таков, что ниже должна быть еще одна ссылка, содержащая атрибут заголовка 'allportfolio', чтобы она работала правильно. Я попробовал добавить этот атрибут к главной ссылке Portfolio, но затем полностью закрыл список.

Portfolio Section - has two list items with CSS class selected applied and Blog Section - only one list item with CSS class selected applied

Когда создается меню, браузер создает выбор Портфолио следующим образом в HTML:

Я пытался сделать что-то похожее на этот ответ, но ничего не получилось, так как он, похоже, не включает ничего внутри элемента списка. Нижеприведенный код jQuery является моей попыткой:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

Я чувствую, что застрял, потому что не могу понять, как сделать так, чтобы HTML выглядел как показано ниже (убрав CSS класс 'selected' и добавив CSS класс 'menu-item'):

UPDATE: Ответ @limelights вроде бы сработал, но я обнаружил некий jQuery, который влияет на эффекты наведения ссылок на сайте и не был уверен, что это причина того, что ответ на код не работает, находится в файле scripts.js шаблона WordPress

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

Также, я очень близок к тому, чего хочу добиться, используя этот код, чтобы наконец сохранить внутренние ссылки открытыми:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

Но, то, что он все еще делает (как видно ниже), это то, что он все еще имеет текст, выбранный как выделенный текст.

selected text still applied to main menu list link, though the class was removed

Любая помощь будет высоко оценена!

19
задан Community 23 May 2017 в 12:19
поделиться