Php-javascriptでhrefリンクを無効にする

StackOverflow https://stackoverflow.com//questions/25078541

  •  02-01-2020
  •  | 
  •  

質問

私は私のページに4つのリンクを持っています（。phtmlファイル）以下のように

<ul id="fileMenu" class="contextMenu">
    <li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
    <li class="download"><a href="#download">Download</a></li>
    <li class="rename"><a href="#rename">Rename</a></li>
    <li class="del"><a href="#delete">Delete</a></li>
    <li class="copypath"><a href="#copypath">Copypath</a></li>
</ul>

リンクの追加、名前の変更、削除を無効にしたい UIから無効にするだけです .

ユーザーはそれを見ることができるはずですが、クリックイベントは実行されません（linksshouldはグレー表示されます）。

私は使用しました

  1. disable="disabled"

  2. display =none;

しかし、彼らは目的を果たしていません。

これがうまくいく他の方法はありますか？

役に立ちましたか？

解決

私は視覚的にリンクを無効にするためにこのCSSを使用します:

.disable {
    position: relative;
}
.disable:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.disable a {
    color: gray;
    cursor: default;
}

次に、リンクを無効にするには、クラスを配置します disable 対応で li:

<li class="download disable"><a href="#download">Download</a></li>

それが行うことは、基本的に透明な擬似要素とのリンクをオーバーレイすることです :before.

別の解決策は次のものを使用できます pointer-events: none ルールですが、IEではうまくサポートされていません。

デモ: http://jsfiddle.net/LPz2Z/1/

他のヒント

JQueryを使用している場合は、これを行うことをお勧めします

$(function() {
 $('#addbtn').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
 });
}

より多くの情報、Stackoverflowの質問

私はそれが最善の方法であるかどうかはわかりませんが、それはトリックを行うことができます ,

あなたが使用する場合 

pointer-events: none; in your css

または、javascriptから呼び出したい場合は、次のようにします。: 

elem.style.display.pointerEvents = "none";

ユーザーとの対話を無効にする。

ポインタイベントを使用する：なし;

<a  style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>

いくつかのオプションがあります。普通の古いjavascriptでは、次のようにすることができます:

<a href="mylink.html" onclick="return false;">Download</a>

または

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

JQueryを使用すると、簡単に多くのリンクを無効にすることができます:

<a href="mylink.html" class="disabled">Download</a>
<a href="anotherlink.html" class="disabled">Delete</a>

<script>
    jQuery(document).ready(function($) {
        $('a.disabled').on('click', function(e) {
            e.preventDefault();
        });
    });
</script>

そして、あなたもCSSを使用することができます！

<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
    a.disabled { pointer-events: none; }
</style>

しかし、それはあなたを驚かせることはありません、すなわち <=v9（私が正しい場合）はこれをサポートしていません。..また、ほとんどのブラウザでは、ブラウザにポインタをカーソルとして使用させることはできません。..

すべてのフィドルのデモで！

これでさえ目的を果たしました 

$("#fileMenu").disableContextMenuItems('#add');
  $("#fileMenu").disableContextMenuItems('#rename');
  $("#fileMenu").disableContextMenuItems('#delete');

私はulリストでcontextMenuクラスを使用しています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top