- Как сделать HTML ссылку некликабельной (неактивной)?
- Комментировать
- Не активная кнопка с помощью disabled
- Можно ли сделать внутри блока ссылки некликабельный элемент?
- Можно ли сделать внутри блока ссылки некликабельный элемент?
- Как сделать ссылку некликабельной с помощью CSS
- Использование CSS свойства pointer-events
- Использование CSS свойства text-decoration
- Использование атрибута href
Как сделать HTML ссылку некликабельной (неактивной)?
Пример CSS кода для создания некликабельной (неактивной) HTML ссылки. Добавляем в CSS код такую запись с классом:
В HTML коде устанавливаем для нективных ссылок класс disabled
Комментировать
СПАСИБО)) простой вариант решения)))
И зачем такие заморочки, если можно просто прописать ссылку, не добавляя
Есть 2 важных преимущества:
- Стилизация неактивной ссылки. Вам всё равно придется использовать CSS стили для того, чтобы скрыть подсветку ссылки при наведении курсора.
- Удобство для разработчика. Данный вариант удобен (необходим) при разработке веб-приложения, так так дает возможность задать стилизацию и быстро найти неактивные ссылки в коде.
Очень быстро нашел нужную информацию, большое спасибо.
Небольшая поправочка, команда pointer-events: none ; подойдёт на блокировки клика по JavaScript’ам с некоторых сайтов, при клике на скрипт идёт пересылка на сайт.
Это решение не будет работать в IE.
Для IE есть следующий метод, он немного хардкодный но работает) Ссылку можно обернуть в span и перекрыть кликабельность ссылки псевдоэлементом на span.
Спасибо! Интересный вариант решения проблемы для IE.
При работе на теме лаерс вордпресс есть возможность управлять CSS но нет возможности править HTML. Есть способ для ИЕ с помощью только CSS?
Спасибо! Лаконично и эффективно.
Подскажите, если в документе 3 ссылки. И надо, чтобы при нажатии на одну из них, остальные исчезали (именно ссылки исчезали, а не содержимое, которое внутри ссылок).
Т.е., есть раскрывающийся доп.текст при нажатии на фразы «да», «нет», «не знаю». Надо чтобы при нажатии допустим на «да», фразы «нет» и «не знаю» пропадали.
Программирую на уровне копипастера) вбил запрос в поисковик, нашел это решение и стал счастливее) Спасибо!
Не активная кнопка с помощью disabled
HTML-CSS-JQUERY
В этой статье мы рассмотрим как сделать кнопку не активной, при не выполнении определенных условий в форме отправки данных на сайте. Напишем код для кнопки подтверждающей «Согласие на обработку персональных данных», данная тема сейчас востребована в связи с введение закона о «Персональных данных». То есть пока клиент при отправке формы не установит чекбокс напротив надписи «Согласие на обработку персональных данных», кнопка отправки будет не активна.
Зададим тегу значение disabled, которое задает не активность кнопки «Отправить». И немного украсим нашу кнопку и type «checkbox» с помощью CSS.
body < background-color: #1684af; color: #fff; >label < margin-bottom: 8px; font-size: 13px; >input[type=»checkbox»]:checked, input[type=»checkbox»]:not(:checked) < position: absolute; left: -9999px; >input[type=»checkbox»]:checked + label, input[type=»checkbox»]:not(:checked) + label < display: inline-block; position: relative; padding-left: 20px; line-height: 1; cursor: pointer; >input[type=»checkbox»]:checked + label:before, input[type=»checkbox»]:not(:checked) + label:before < content: ""; position: absolute; left: 0px; top: 0px; width: 12px; height: 12px; background-color: #ffffff; >input[type=»checkbox»]:checked + label:after, input[type=»checkbox»]:not(:checked) + label:after < content: ""; position: absolute; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; >input[type=»checkbox»]:checked + label:after, input[type=»checkbox»]:not(:checked) + label:after < left: 1px; top: 1px; width: 2px; height: 2px; border: 4px solid #F2622E; >input[type=»checkbox»]:not(:checked) + label:after < opacity: 0; >input[type=»checkbox»]:checked + label:after < opacity: 1; >.check-policy < font-size: 13px; >.btn < padding: 0.75em 1.75em; display: inline-block; line-height: 1; margin: 2em 0; color: #fff; background-color: #F2622E; border: none; >.btn:hover < cursor: pointer; >.btn:disabled, .btn:hover:disabled
А теперь добавим к input JS событие:
что бы при нажатии на строчку с «Согласие на обработку персональных данных» кнопка «Отправить» стала активной.
Посмотреть как это работает можно здесь:
Можно ли сделать внутри блока ссылки некликабельный элемент?
Код здесь
Нужно сделать, чтобы спаны с классами type-of-work__item-price и type-of-work__item-time были не кликабельны.
pointer-events: none;
не помогает.
Может быть есть еще идеи?
Евгений Эта поправка пришла позже, не хотелось менять структуру. К тому же кликабельным должно быть и изображение (Там картинки не подгрузились)
Можно. Например я такое часто использую, если в адаптивной верстке мне необходимо на ссылку меню справа повесить span, при нажатии на который будет отменено свойства перехода по ссылке и произойдет выпадение подменю. Но делаю я такое исключительно при адаптиве, причем span помещаю скриптом тоже. Делаю это вот таким образом:
//Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню $('.left-menu__list .left-menu__item').append( function(indx, val)< if($(this).find('.left-menu__list').length != 0) return '›'; else return ''; >); //Окончание секции "Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню" //Раскрытие меню при нажатии на "стрелку" $('.arrow').click(function()< $(this).toggleClass('arrow-switch'); $(this).parents('.left-menu__item').find('.left-menu__list').toggleClass('left-menu__list--open'); >); //Окончание секции "Раскрытие меню при нажатии на "стрелку".left-menu__list < max-height: 0; -webkit-transition: 800ms ease all; transition: 800ms ease all; >.left-menu__list--open
Можно ли сделать внутри блока ссылки некликабельный элемент?
Код здесь
Нужно сделать, чтобы спаны с классами type-of-work__item-price и type-of-work__item-time были не кликабельны.
pointer-events: none;
не помогает.
Может быть есть еще идеи?
Евгений Эта поправка пришла позже, не хотелось менять структуру. К тому же кликабельным должно быть и изображение (Там картинки не подгрузились)
Можно. Например я такое часто использую, если в адаптивной верстке мне необходимо на ссылку меню справа повесить span, при нажатии на который будет отменено свойства перехода по ссылке и произойдет выпадение подменю. Но делаю я такое исключительно при адаптиве, причем span помещаю скриптом тоже. Делаю это вот таким образом:
//Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню $('.left-menu__list .left-menu__item').append( function(indx, val)< if($(this).find('.left-menu__list').length != 0) return '›'; else return ''; >); //Окончание секции "Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню" //Раскрытие меню при нажатии на "стрелку" $('.arrow').click(function()< $(this).toggleClass('arrow-switch'); $(this).parents('.left-menu__item').find('.left-menu__list').toggleClass('left-menu__list--open'); >); //Окончание секции "Раскрытие меню при нажатии на "стрелку".left-menu__list < max-height: 0; -webkit-transition: 800ms ease all; transition: 800ms ease all; >.left-menu__list--open
Как сделать ссылку некликабельной с помощью CSS
Когда вы создаете веб-страницу, иногда может возникнуть необходимость отключить ссылку на определенном элементе. В этой статье мы расскажем, как сделать ссылку некликабельной с помощью CSS.
Использование CSS свойства pointer-events
Самый простой способ сделать ссылку некликабельной — это использование CSS свойства pointer-events. Данный способ позволяет отключить кликабельность элемента, но не удаляет ссылку. Вот пример кода:
Здесь мы создаем класс «disabled» для ссылки, которую хотим сделать некликабельной, и задаем ему свойство pointer-events со значением «none».
Использование CSS свойства text-decoration
Еще один способ сделать ссылку некликабельной — это убрать ее стандартное оформление. Для этого мы можем использовать CSS свойство text-decoration. Вот пример кода:
Здесь мы задаем класс «disabled» для ссылки и устанавливаем ему значение text-decoration: none, которое убирает подчеркивание ссылки. Мы также устанавливаем свойство cursor: default, чтобы курсор не менял свой вид при наведении на некликабельную ссылку.
Использование атрибута href
Еще один способ сделать ссылку некликабельной — это удалить ее атрибут href. Это приведет к тому, что при нажатии на ссылку ничего не произойдет. Вот пример кода:
Здесь мы добавляем класс «disabled» для ссылки и удаляем атрибут href, задав его значение «#». Это сделает ссылку некликабельной.
В заключение, существует несколько способов сделать ссылку некликабельной с помощью CSS. Выбор зависит от того, что вы хотите добиться и как вы хотите, чтобы ваша страница выглядела.