Как сделать открытую ссылку в Табе неактивной? (некликабельной)

…пост будет очень простой коротенький…

Сегодня изучать cms Вордпресс в связке с шаблоном становится всё более немодным! скачивают какие-то бесплатные темы, рихтуют под свои требования… и запускают скороспелые проекты в свет … а уж в процессе (по мере поступления) решают те или иные возникшие вопросы. Не знаю: правильно это, или не правильно – развивать проекты без определённых стартовых знаний… но как бы там ни было, и уж коли возникают вопросы, их следует решать.

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

Возникает вопрос: как сделать ссылку Таба неактивной: т.е чтобы при переходе по ссылкам – “открытый таб” (ссылка) становилась неактивной…

Как сделать ссылку в открытом Табе неактивной

Иногда именно в такой постановке задают вопрос начинающие сайтовладельцы! А однажды – админ какого-то поварского сайта – попросила сделать ей для этих целей плагин.

Вряд ли стоит, решая такие простые вопросы, создавать (и звучит как-то смешно – создавать)) плагин…

Решение достаточно просто! …потребуется всего-то только отыскать в активном шаблоне сайта файл стилей… style.css и не побояться немного поработать!

Итак: нужно отыскать класс css в который завёрнуты ссылки табов.

Как это сделать?

Открываем “консоль для разработчиков” F12 … далее наводим курсор на требуемое окошко (кнопку) таба и… смотрим имя требуемого нам класса.

Смотрите стили CSS именно того Таба который в данный момент активен (т.е на который кликнули/перешли)…

Смотрите внимательно что к чему; копируете имя селектора… затем – в шаблоне – в файле стилей (через поиск) отыскиваете требуемый…

Предположим (для примера), у нас будет такой селектор (а следовательно, класс): .tabs-widget-current – всё что нам нужно, так это добавить к этому классу свойство pointer-events:none – оно и сделает ссылку таба неактивной…

.tabs-widget-current{pointer-events:none}

Возможно даже добавить для усиления важности свойства pointer-events:none – !important – это на тот случай, если используете дочернюю тему, либо какой-то сторонний плагин табов!…

Чтобы не засорять существующий в шаблоне класс стилей, советую организовать отдельный одноимённый селектор… (для некоторых случаев это целесообразнее)

.tabs-widget-current{pointer-events:none !important}

В финале работ получится примерно так, если смотреть свойства CSS в панели разработчиков (в браузере).

Ключевая фраза в селекторе current – обычно отработка табов используется именно в этой css-html связке. Именно по этой примете и ищите!

И ещё: помните, в большинстве приличных шаблонов (или плагинов) используются какие-то визуальные эффекты активного/не активного ТАБА – изменение цвета текста ссылки, величины и пр. – то есть обрабатывающие неактивное состояние ссылки таба селекторы css нам в данном случае и нужны!

Подобно нынешнему варианту деактивируют ссылки меню и пр. (избавляются от циклических ссылок)

Но, в случае с меню, уже будем работать с файлом функций шаблона functions.php – это, как и говорил, в следующих статьях)

А пока – всё!..

…если что не ясно, пишите… задавайте вопросы в коммах…

Online консультация по настройкам и созданию сайтов на WordPress

На этом занавес представления опускается…
…на рампы пыль печальная ложится…