Убрать ссылку в javascript

Как отключить ссылку href в JavaScript?

У меня есть тег Previous 1 2 3 4 Next , и в некоторых случаях я хочу, чтобы этот тег был полностью отключен.

Код из комментариев (так создается ссылка)

Попробуйте это, если вы не хотите, чтобы пользователь перенаправлялся при нажатии

вы можете деактивировать все ссылки на странице с помощью этого класса стиля:

теперь, конечно, трюк деактивирует ссылки только тогда, когда вам нужно, вот как это сделать:

используйте пустой класс A, например:

тогда, когда вы хотите отключить ссылки, сделайте следующее:

 GetStyleClass('a').pointerEvents = "none" function GetStyleClass(className) < for (var i=0; i< document.styleSheets.length; i++) < var styleSheet = document.styleSheets[i] var rules = styleSheet.cssRules || styleSheet.rules for (var j=0; j> > return 0 > 

ПРИМЕЧАНИЕ. Имена правил CSS преобразуются в нижний регистр в некоторых браузерах, и этот код чувствителен к регистру, поэтому лучше использовать имена классов нижнего регистра для этого

GetStyleClass('a').pointerEvents = "" 

проверьте эту страницу http://caniuse.com/pointer-events для получения информации о совместимости с браузером

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

Если вы просто хотите деактивировать ONE-ссылку (я понимаю только, что это был вопрос), я бы использовал функцию, которая вручную устанавливает URL-адрес текущей страницы или нет, основываясь на этом условии.
(например, решение, которое вы приняли)

этот вопрос был намного проще, чем я думал:)

Вы можете просто дать ему пустой хэш:

или если это недостаточно для “отключить”, используйте обработчик событий:

anchor.href = "javascript:void(0)"; 

Попробуйте это с помощью jQuery:

Я нахожу этот способ более простым в реализации. И это имеет то преимущество, что вы js. Не внутри вашего html, а в другом файле. Я думаю, что без несвязанного. Оба события все еще активны. Не уверен. Но в каком-то смысле вам нужно только одно событие

Самый простой способ отключить ссылку – просто не показывать ее. Запускайте эту функцию всякий раз, когда вы хотите проверить, выполнено ли ваше условие, чтобы скрыть кнопку “Предыдущий” (замените if (true) на ваше условие):

var testHideNav = function() < var aTags = document.getElementsByTagName('a'), atl = aTags.length, i; for (i = 0; i < atl; i++) < if (aTags[i].innerText == "Previous") < if (true) < // your condition to disable previous aTags[i].style.visibility = "hidden"; >else < aTags[i].style.visibility = "visible"; >> else if (aTags[i].innerText == "Next") < if (false) < // your condition to disable next aTags[i].style.visibility = "hidden"; >else < aTags[i].style.visibility = "visible"; >> > >; 

Затем запустите testHideNav() , когда вам нужно сделать проверку, изменилось ли ваше состояние.

Ссылка не будет никуда, ваша функция будет выполнена.

Вместо этого используйте span и javascript onclick. Некоторые браузеры “прыгают”, если у вас есть ссылка и “#” href.

Таким образом, вышеупомянутые решения делают ссылку неработоспособной, но не делают ее видимой (AFAICT), что ссылка больше не действительна. У меня есть ситуация, когда у меня есть серия страниц и вы хотите отключить (и сделать очевидным, что она отключена) ссылку, указывающую на текущую страницу.

window.onload = function() < var topics = document.getElementsByClassName("topics"); for (var i = topics.length-1; i >-1; i-- ) < for (var j = topics[i].childNodes.length-1; j >-1; j--) < if (topics[i].childNodes[j].nodeType == 1) < if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) < topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML; >> > > > 

Это просматривает список ссылок, находит тот, который указывает на текущую страницу (n_root3 может быть локальной, но я полагаю, что document должно иметь нечто подобное) и заменяет ссылку на содержимое текста ссылки.

У меня была аналогичная потребность, но моя мотивация заключалась в том, чтобы предотвратить двойное нажатие ссылки. Я выполнил это с помощью jQuery:

$(document).ready(function() < $("#myLink").on('click', doSubmit); >); var doSubmit = function() < $("#myLink").off('click'); // do things here >; 

MDN рекомендует element.removeAttribute(attrName); переопределить атрибут нулевым (или некоторым другим значением), если вы хотите его отключить. В этом случае это будет element.removeAttribute(«href»);

Установите этот плагин для jQuery и используйте его

Это позволяет вам отключить/включить практически любое поле на странице.

Если вы хотите открыть страницу в каком-либо состоянии, напишите функцию java script и вызовите ее из href. Если условие выполнено, вы открываете страницу, иначе ничего не делаете.

код выглядит следующим образом:

Click here and function: function openPage() < if(some conditon) opener.document.location = "http://www.google.com"; >> 

Вы также можете поместить ссылку в div и установить для свойства отображения атрибута Style значение none. это скроет div.
Например,

Это скроет ссылку. Используйте кнопку или изображение, чтобы сделать этот div видимым теперь, вызывая эту функцию в onclick как:

 and write the js code as: function showDiv()

Вы также можете поместить тег id в тег html, поэтому он будет

И получите этот идентификатор на своем javascript, используя

document.getElementById("myATag").value="#"; 

Один из них должен обязательно работать haha ​​

Другой способ отключения ссылки

element.removeAttribute('href'); 

якорный тег без href будет реагировать как отключенный/обычный текст

Вместо void вы также можете использовать:

Я искал что-то простое, поэтому я объединил приведенные выше ответы (предлагая это: javascript: void(0); ) в JQuery .attr() , например:

$("a").attr("href", "javascript: void(0);" ); 

Другое решение состоит в том, чтобы использовать переменную следующим образом:

где isEnabled – false, чтобы отключить ссылку (true, если она включена).

0) Вы лучше помните, что некоторые браузеры “прыгают”, если у вас есть ссылка и “#” href. Так что лучшим способом будет пользовательский JavaScript

1) Если вы после пользовательского JavaScript, вот оно:

“Return false” не позволяет перейти по ссылке.

2) Вы можете избежать использования следующих

Поскольку псевдопротокол javascript в некоторых браузерах может перевести страницу в состояние ожидания, что может привести к непредвиденным последствиям. IE6 известен этим. Но если вас не волнует IE6, и вы все тестируете – это может быть хорошим решением.

3) Если у вас уже есть jQuery и bootstrap в вашем проекте, вы можете использовать их следующим образом:

$('.one-click').on("click", function (e) < $( this ).addClass('disabled'); >); 

где .disabled класс, приходящий в форме начальной загрузки.

Сайт начальной загрузки Qupte (здесь)

Ссылка на функциональность

Класс .disabled использует pointer-events: none чтобы попытаться отключить функциональность ссылки s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают события указателя: ни один, навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте tabindex=»-1″ в эти ссылки (чтобы они не получали фокус клавиатуры) и используйте custom JavaScript чтобы отключить их функциональность.

и custom JavaScript был показан в разделе 1

Ниже код для отключенных ссылок:

другое очень простое решение:

Источник

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

От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.

В какой-то момент я понял, что моим коллегам это не понравится, поэтому я начал думать, как реализовать блокировку ссылок. Понимая, что это потребует много времени, я хотел доказать, что затея не стоит тех усилий и кода, который придется поддерживать. Но я боялся, что если покажу, что это все-таки сделать можно, они проигнорируют все мои предупреждения и просто используют мой пример как доказательство того, что все в порядке. Меня это не потрясло, но я подумал, что вам может пригодиться мое исследование.

Просто не делайте этого

Заблокированная ссылка уже не ссылка, это текст. Вам нужно пересмотреть дизайн, если в нем есть заблокированные ссылки.

В BootStrap есть примеры применения класса .disabled к якорям, я их ненавижу. По крайней мере, они сказали, что этот класс всего лишь добавляет стиль disabled. Формулировка вводит в заблуждение. Чтобы реально отключить ссылку, недостаточно просто придать ей вид отключенной ссылки.

Онлайн курс по JavaScript

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

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Надежный способ: удалите href

Если вы приняли решение игнорировать мои предупреждения и все еще хотите заблокировать ссылку, то лучший способ, который я знаю – удалите href атрибут.

Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»

У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»

Стандартный JS код вставки и удаления атрибута href:

Источник

JavaScript | Как удалить ссылку, но оставить её innerText?

Мы хотим очистить текст — хотим убрать HTML-элемент , который оборачивает фразу «купить тёплые ботинки».

В чём суть задачи?

По сути, нам нужно заменить innerHTML на innerText. Вот и всё!

Простое решение — примитивным способом

Сначала получаем нужный нам параграф — элемент

. В этом примере он всего один. Это сделано для простоты.

Обращаемся к документу. Получаем HTML-коллекцию элементов

. Извлекаем первый элемент

.

document.getElementsByTagName("p")[0]

Теперь мы можем присвоить нужный нам innerHTML

document.getElementsByTagName("p")[0].innerHTML = document.getElementsByTagName("p")[0].innerText

Команда выглядит громоздко, хотя просто меняет разметку на текст.

Почему это решение «примитивное»? Потому что оно сбросит любую HTML-разметку, которая есть внутри элемента — не только ссылку.

Правильное решение!

По факту нам нужно написать функцию, которая будет доставать из ссылки её innerText и возвращать обратно на нужное место.

Подход к решению задачи такой:

1. Получаем innerHTML параграфа — это будет строка. (получаем innerHTML родителя ссылки)
2. Получаем outerHTML ссылки — это будет строка. Это будет разметка элемента в виде строки
3. Получаем innerText ссылки. Результат будем подставлять вместо outerHTML ссылки.
4. Вычитаем строку из строки и заменяем «внутренним текстом ссылки». То есть вычитаем «outerHTML ссылки» из «innerHTML параграфа» и заменяем на «innerText ссылки» — это будет строка. То есть вычитаем «outerHTML ссылки» из «innerHTML родителя» ссылки и заменяем на «innerText ссылки» — это будет строка.
5. Устанавливаем для innerText параграфа значение вычитания/замены. То есть устанавливаем для innerText родителя ссылки значение вычитания/замены.

var a = document.getElementsByTagName("a")[0].parentElement.innerHTML

var b = document.getElementsByTagName("a")[0].outerHTML

var c = document.getElementsByTagName("a")[0].innerText

document.getElementsByTagName("a")[0].parentElement.innerHTML = d

function clearLink (link)< var a = link.parentElement.innerHTML var b = link.outerHTML var c = link.innerText var d = a.replace(b, c) link.parentElement.innerHTML = d >

function clearLink (link)< link.parentElement.innerHTML = link.parentElement.innerHTML.replace(link.outerHTML, link.innerText) >