문제

나는 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 규칙하지만 잘되지에서 지원됩니다.

Demo: 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