Как отключить ссылку 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>';

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

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

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

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

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

этот вопрос был НАМНОГО проще, чем я думал :)

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

anchor.href = "#";

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

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

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

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

anchor.href = null;

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

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

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

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

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

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

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

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

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

У меня была аналогичная потребность, но моей мотивацией было предотвратить двойное нажатие на ссылку. Я сделал это с помощью 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>

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

HTH

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

Моя проблема решена с помощью кода ниже:

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

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

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

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

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

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

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

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

Вы также можете поместить ссылку в div и установить для свойства display атрибута 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="#"; 

Один из них наверняка сработает, ха-ха

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

element.removeAttribute('href');

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

<a> w/o href </a>

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

см. jsFiddel

надеюсь, что это полезно.

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

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

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

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

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

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

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

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