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

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

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

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

Ответы

Ответ 1

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

<a href="javascript: void(0)">I am a useless link</a>

Ответ 2

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

a {
    pointer-events:none;
}

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

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

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<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

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

для возобновления ссылок:

GetStyleClass('a').pointerEvents = ""

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

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

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

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

Ответ 3

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

anchor.href = "#";

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

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

Ответ 4

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

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

Ответ 5

anchor.href = null;

Ответ 6

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

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

Ответ 7

Самый простой способ отключить ссылку - просто не показывать ее. Запускайте эту функцию всякий раз, когда вы хотите проверить, выполнено ли ваше условие, чтобы скрыть кнопку "Предыдущий" (замените 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(), когда вам нужно сделать проверку, изменилось ли ваше состояние.

Ответ 8

Это тоже возможно:

<a href="javascript:void(0)" onclick="myfunction()">

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

Ответ 9

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

Ответ 10

Таким образом, вышеупомянутые решения делают ссылку неработоспособной, но не делают ее видимой (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 должно иметь нечто подобное) и заменяет ссылку на содержимое текста ссылки.

НТН

Ответ 11

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

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

HTML выглядит так:

<a href='javascript: void(0);' id="myLink">click here</a>

Ответ 12

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Ответ 13

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

http://plugins.jquery.com/project/jqueryenabledisable

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

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

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

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

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

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

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

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

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

<a id="myATag" href="whatever"></a>

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

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

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

Ответ 14

Спасибо всем...

Моя проблема решена ниже:

<a href="javascript:void(0)"> >>> </a>

Ответ 15

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

element.removeAttribute('href');

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

<a> w/o href </a>

вместо <a href="#"> with href </a>

см. jsFiddel

Надеюсь, что это упрямо.

Ответ 16

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

<a href="javascript:;">this link is disabled</a>

Ответ 17

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

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

Ответ 18

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

<a href="isEnabled && myFunction()">My link</a>

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

Ответ 19

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

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

<a href="#" onclick="DoSomething(); return false;">Link</a>

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

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

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

или же

  <a href="javascript:;" onclick="DoSomething();">Link</a>

Поскольку псевдопротокол 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

Ответ 20

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

<a href="javascript: void(0)">test disabled link</a>

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

<a href="#">test disabled link</a>

Первое решение эффективно.