JavaScriptでhrefリンクを無効にするにはどうすればよいですか？

タグが<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はいつものようにそれを許可しません:)とにかくこれを投稿しています。これには役立つ情報が含まれていると考えられ、一部のプロジェクトは既知のブラウザを使用しているためです、モバイルデバイスでWebビューを使用しているときのように。

リンクを1つだけ無効にしたい場合（私はそれが問題であることに気付いただけです）、その条件に基づいて現在のページの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の中ではなく、別のファイルにあります。アンバインドなしではないかと思います。どちらのイベントもまだアクティブです。わからない。しかし、ある意味では、この1つのイベントだけが必要です。

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に配置して、Style属性のdisplayプロパティをnoneに設定することもできます。これにより、divが非表示になります。たとえば、

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

これによりリンクが非表示になります。ボタンまたは画像を使用して、onclickで次のようにこの関数を呼び出し、このdivを表示します。

<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でこのIDを使用して取得します

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

これの1つは確かに機能する必要があります

リンクを無効にする別の方法

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のリンク機能を無効にするために使用しますが、そのCSSプロパティはまだ標準化されていません。さらに、ポインタイベントをサポートするブラウザでも、なし：キーボードナビゲーションは影響を受けません。つまり、目の見えるキーボードユーザーと支援技術のユーザーは、これらのリンクをアクティブにできます。安全のため、tabindex="-1"これらのリンクに属性を追加し（キーボードフォーカスを受け取らないようにする）、を使用custom JavaScriptしてそれらの機能を無効にします。

とcustom JavaScriptセクション1に示されていました

無効なリンクのコードの下：

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

別の非常に単純な解決策は次のとおりです。

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

最初のソリューションは効率的です。