programing

CSS만을 사용하여 링크를 디세블로 하는 방법

powerit 2023. 4. 8. 09:53
반응형

CSS만을 사용하여 링크를 디세블로 하는 방법

CSS를 사용하여 링크를 디세블로 하는 방법이 있나요?

는 '수업하다'라는 수업이 있어요.current-page이 클래스의 링크를 비활성화하여 클릭 시 작업이 수행되지 않도록 합니다.

이 솔루션에서:

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" aria-current="page">Link</a>

브라우저 지원에 대해서는, https://caniuse.com/#syslog=syslog-syslog를 참조해 주세요.Internet Explorer 를 서포트할 필요가 있는 경우는, 회피책이 있습니다.이 답변을 참조해 주세요.

경고:비 SVG 요소에 대한 CSS에서의 사용은 실험적인 것입니다.이 기능은 CSS 3 UI 드래프트 사양의 일부였지만 미해결 문제가 많아 CSS 4로 연기되었습니다.

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>

CSS는 어떤 스타일의 변경에만 사용할 수 있습니다.순수 CSS에서 할 수 있는 최선의 방법은 링크를 완전히 숨기는 것입니다.

당신에게 정말 필요한 것은 자바스크립트 코드입니다.jQuery 라이브러리를 사용하여 원하는 작업을 수행하는 방법은 다음과 같습니다.

$('a.current-page').click(function() { return false; });

CSS는 그럴 수 없어요.CSS는 프레젠테이션 전용입니다.옵션은 다음과 같습니다.

  • 를를 don don don don don don don the the the href의 <a>
  • JavaScript를하여 해당 JavaScript의 .classhref ★★★★★★★★★★★★★★★★★」onclickjQuery가 도움이 될 것입니다(NickF는 비슷하지만 더 나은 방법을 보여주었습니다).

부트스트랩 비활성화 링크

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled(부트스트랩 비활성화) 버튼이지만 링크처럼 보입니다.

<button type="button" class="btn btn-link">Link</button>

설정할 수 요.href javascript:void(0):

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>

CSS만으로 하는 경우는, 디세이블 로직을 CSS 로 정의할 필요가 있습니다.

CSS 정의에서 로직을 이동하려면 속성 실렉터를 사용해야 합니다.다음은 몇 가지 예입니다.

href: "href" 를 합니다.=

다음과 같이 특정 href 값을 포함하는 링크를 디세블로 할 수 있습니다.

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

합니다.*=

「다음에 있다」를 포함한 ./keyword/ in path는 됩니다.

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

같이 합니다.^=

[attribute^=value]연산자는 특정 값으로 시작하는 속성을 대상으로 합니다.웹 사이트 및 루트 경로를 삭제할 수 있습니다.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

https 이외의 링크를 디세블로 할 수도 있습니다.예를 들어 다음과 같습니다.

a:not([href^="https://"]){
  pointer-events: none;
}

같이 합니다.$=

[attribute$=value]아트리뷰트파일 확장자를 삭제하면 편리합니다.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

또는 기타 속성

CSS: HTML Attribute: HTML Attribute. " " " " " " " " " " "rel,target,data-custom기타 등등...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

특성 선택기 결합

여러 규칙을 연결할 수 있습니다.웹 사이트를 가리키는 링크가 아닌 모든 외부 링크를 비활성화한다고 가정합니다.

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

또는 특정 웹사이트의 PDF 파일에 대한 링크를 비활성화합니다.

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

브라우저 지원

속성 실렉터는 Internet Explorer 7부터 지원되고 있습니다.그리고 그:not()Internet Explorer 9 이후 선택 도구입니다.

사용:

.current-page a:hover {
    pointer-events: none !important;
}

그리고 그것만으로는 충분하지 않았습니다.브라우저에 따라서는 아직 링크가 점멸하고 있습니다.

덧붙여야만 있었습니다.

.current-page a {
    cursor: text !important;
}

아래 클래스를 HTML로 적용합니다.

.avoid-clicks {
  pointer-events: none;
}

양식에서 HTML/CSS만 사용하려면 단추를 사용하는 방법도 있습니다.스타일링 및 설정disabled기여하다.

예: http://jsfiddle.net/cFTxH/1/

CSS를 사용하여 이 작업을 수행할 수 있는 방법 중 하나는 CSS를 포장지에 설정하는 것입니다.div다른 무언가가 그 자리를 대신할 수 있게 하는 거죠

예를 들어 다음과 같습니다.

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

다음과 같은 CSS를 사용하여

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

실제로 전원을 끄려면a클릭 이벤트를 교환해야 합니다.href(다른 사람의 설명에 따라).

PS: 분명히 말씀드리면, 이 솔루션은 매우 어설픈 해결책이라고 생각합니다.SEO에게도 최선은 아니지만, CSS만으로 최선이 된다고 생각합니다.

이것을 시험해 보세요.

<style>
    .btn-disable {
        display: inline-block;
        pointer-events: none;
    }
</style>

포인터 이벤트 속성을 통해 CSS 호버/액티브 상태, JavaScript 클릭/탭 이벤트, 커서 표시 여부 등 HTML 요소가 마우스/터치 이벤트에 어떻게 응답하는지 제어할 수 있습니다.

링크를 비활성화하는 방법은 이것뿐만이 아닙니다.Internet Explorer 10(이후) 및 모든 새로운 브라우저에서 동작하는 CSS의 좋은 방법입니다.

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>

인터넷을 검색해보니 이보다 더 좋을 순 없다.기본적으로 버튼 클릭 기능을 비활성화하려면 다음과 같이 jQuery를 사용하여 CSS 스타일을 추가합니다.

$("#myLink").css({ 'pointer-events': 'none' });

다시 활성화하려면 다음과 같이 하십시오.

$("#myLink").css({ 'pointer-events': '' });

Firefox와 Internet Explorer 11에서 확인되었고 작동했습니다.

body{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
a.disable{
  pointer-events: none;
  color: black;
  text-decoration: none;
}
<a href="https://example.com">Normal</a>
<a href="https://example.com" class="disable">Disable</a>

다음 CSS 콘텐츠를 사용할 수 있습니다.

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}
<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

여러 가지 접근방식을 조합하여 보다 고도의 기능을 제공합니다.disabled기능성.여기 요지가 있고 코드는 아래와 같습니다.

이를 통해 디세이블로 표시된 앵커가 실제로 이와 같이 동작하도록 여러 수준의 방어가 제공됩니다.

이 방법을 사용하면 다음과 같은 앵커를 얻을 수 없습니다.

  • 찰칵찰칵
  • 탭과 히트 리턴
  • 탭으로 이동하면 포커스가 다음으로 초점을 맞출 수 있는 요소로 이동합니다.
  • 나중에 앵커가 활성화되는지 여부를 인식합니다.

 

  1. 이 CSS 내용은 방어선의 첫 번째이므로 포함시키십시오.이는 사용하는 셀렉터가 'a.disabled'라고 가정합니다.

    a.disabled {
  pointer-events: none;
  cursor: default;
}

  2. 다음으로 (옵션 셀렉터를 사용하여) 다음과 같은 클래스를 인스턴스화합니다.

     $ ->
   new AnchorDisabler()

    다음은 CoffeeScript 클래스입니다.

     class AnchorDisabler
   constructor: (selector = 'a.disabled') ->
     $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

   isStillDisabled: (ev) =>
     ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
     target = $(ev.target)
     return true if target.hasClass('disabled')
     return true if target.attr('disabled') is 'disabled'
     return false

   onFocus: (ev) =>
     ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
     return unless @isStillDisabled(ev)

     focusables = $(':focusable')
     return unless focusables

     current = focusables.index(ev.target)
     next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

     next.focus() if next


   onClick: (ev) =>
     # disabled could be dynamically removed
     return unless @isStillDisabled(ev)

     ev.preventDefault()
     return false

   onKeyup: (ev) =>

     # 13 is the JavaScript key code for Enter. We are only interested in disabling that, so get out fast
     code = ev.keyCode or ev.which
     return unless code is 13

     # disabled could be dynamically removed
     return unless @isStillDisabled(ev)

     ev.preventDefault()
     return false

올바른 z 인덱스를 사용하여 링크를 포함하도록 다른 요소의 크기를 조정할 수도 있습니다.클릭을 "먹어버릴" 것입니다.

(브라우저 창이 모바일 크기일 때 H2가 링크를 커버하는 '응답형' 설계로 인해 갑자기 비활성화된 링크에 문제가 발생했기 때문에 우연히 이 사실을 알게 되었습니다.

여기 ★★★★★★
먹어봐.

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

이것도 드셔보세요

<style>
.btn-disable {
  pointer-events: none !important;
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.6;
    text-decoration: none;       
}
</style>
<html>
    <head>
        <title>NG</title>
    </head>
    <style>
        .btn-disable {
          pointer-events: none !important;
            color: currentColor;
            cursor: not-allowed;
            opacity: 0.6;
            text-decoration: none;       
        }
        </style>
    <body>
        <div class="btn-disable">
            <input type="button" value="Show">
        </div>
    </body>
</html>

CSS에서는 가능합니다.

.disabled{
  cursor: default;
  pointer-events: none;
  text-decoration: none;
  color: black;
}
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

참조처:

★★★★★★★★★에 주의해 주세요.text-decoration: none; ★★★★★★★★★★★★★★★★★」color: black;는 필수는 아니지만 링크를 일반 텍스트처럼 보이게 합니다.

또 다른 요령은 눈에 보이지 않는 요소를 그 위에 놓는 것이다.이렇게 하면 호버 효과도 사용할 수 없게 됩니다.

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

pointer-events:none 다음의 로 합니다.

.disabled {
    pointer-events: none;
}

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

링크 없이 탭을 사용하면 링크 속성을 포함하지 않습니다.

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>

언급URL : https://stackoverflow.com/questions/2091168/how-to-disable-a-link-using-only-css

반응형

'programing' 카테고리의 다른 글

enctpe='art/form-data'는 무엇을 의미합니까?  (0) 2023.04.08
특정 폴더에서 Cygwin 열기  (0) 2023.04.08
BOM을 사용하지 않고 PowerShell을 사용하여 UTF-8에 파일 쓰기  (0) 2023.04.08
Flatter Doctor --android-licenses : 스레드 "main" java.lang에 예외가 있습니다.NoClassDefFoundError(NoClassDefFound 오류)  (0) 2023.04.08
PowerShell에 권장되는 코딩 스타일은 무엇입니까?  (0) 2023.04.08

'programing'의 다른글

  • 현재글CSS만을 사용하여 링크를 디세블로 하는 방법

관련글

댓글

티스토리툴바