CSS භාවිතා කරමින් සබැඳියක් අක්‍රිය කිරීමට ක්‍රමයක් තිබේද?

මට පංතියක් ඇති අතර current-pageමෙම පංතිය සමඟ සම්බන්ධතා අක්‍රීය කිරීමට අවශ්‍ය වන අතර එමඟින් ඒවා ක්ලික් කළ විට කිසිදු ක්‍රියාමාර්ගයක් නොලැබේ.

පිළිතුර දැනටමත් ප්‍රශ්නයේ අදහස් දැක්වීම්වල ඇත. වැඩි දෘශ්‍යතාවයක් සඳහා, මම මෙම විසඳුම මෙහි පිටපත් කරමි :

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

බ්‍රව්සර සහාය සඳහා, කරුණාකර https://caniuse.com/#feat=pointer-events බලන්න . ඔබට IE සඳහා සහය දැක්වීමට අවශ්‍ය නම් එහි ප්‍රති ar ල ඇත; මෙම පිළිතුර බලන්න .

අවවාදයයි: pointer-eventsSVG නොවන මූලද්‍රව්‍ය සඳහා CSS හි භාවිතය පර්යේෂණාත්මක ය. CSS3 UI කෙටුම්පත් පිරිවිතරයේ කොටසක් ලෙස භාවිතා කර ඇති නමුත් බොහෝ විවෘත ගැටළු හේතුවෙන් CSS4 වෙත කල් දමා ඇත.

CSS භාවිතා කළ හැක්කේ යම් දෙයක විලාසය වෙනස් කිරීමට පමණි. පිරිසිදු CSS සමඟ ඔබට බොහෝ විට කළ හැකි හොඳම දෙය නම් සබැඳිය මුළුමනින්ම සැඟවීමයි.

ඔබට සැබවින්ම අවශ්‍ය වන්නේ ජාවාස්ක්‍රිප්ට් කිහිපයක් පමණි. JQuery පුස්තකාලය භාවිතා කර ඔබට අවශ්‍ය දේ කරන්නේ කෙසේද යන්න මෙන්න.

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

CSS හට එය කළ නොහැක. CSS ඉදිරිපත් කිරීම සඳහා පමණි. ඔබේ විකල්ප:

• hrefඔබගේ <a>ටැග් වල ගුණාංගය ඇතුළත් නොකරන්න .
• ජාවාස්ක්‍රිප්ට් භාවිතා කරන්න, ඒ සමඟ නැංගුරම් මූලද්‍රව්‍ය සොයා ගැනීමට classසහ ඒ අනුව ඒවායේ hrefහෝ onclickගුණාංග ඉවත් කරන්න . jQuery ඔබට ඒ සඳහා උපකාරී වනු ඇත (නික් එෆ් සමාන නමුත් වඩා හොඳ දෙයක් කරන්නේ කෙසේදැයි පෙන්වා දුන්නේය).

Bootstrap අබල කළ සබැඳිය

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

බූට්ස්ට්‍රැප් අක්‍රීය බොත්තම නමුත් එය සබැඳියක් සේ පෙනේ

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

මම භාවිතා කළේ:

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

එය ප්‍රමාණවත් නොවීය. සමහර බ්‍රව්සර් වල එය තවමත් සබැඳිය ප්‍රදර්ශනය කරමින්, බැබළෙයි.

මට එකතු කිරීමට සිදු විය:

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

ඔබට පෝරමයක HTML / CSS වලට ඇලී සිටීමට අවශ්‍ය නම්, තවත් විකල්පයක් වන්නේ බොත්තමක් භාවිතා කිරීමයි. එය මෝස්තර කර සකසන්නdisabled ගුණාංගය .

උදා: http://jsfiddle.net/cFTxH/1/

ඔබට එය CSS පමණක් වීමට අවශ්‍ය නම්, අක්‍රීය කිරීමේ තර්කනය CSS විසින් අර්ථ දැක්විය යුතුය.

CSS අර්ථ දැක්වීම් වල තර්කනය ගෙනයාමට, ඔබට ආරෝපණ තේරීම් භාවිතා කිරීමට සිදුවේ. මෙන්න උදාහරණ කිහිපයක්:

නිශ්චිත href ඇති සබැඳිය අක්‍රීය කරන්න: =

විශේෂිත href අගයක් ඇති සබැඳි අක්‍රීය කිරීමට ඔබට තෝරා ගත හැකිය:

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

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

මාර්ග කොටසක් අඩංගු සබැඳියක් අක්‍රීය කරන්න: *=

මෙන්න, /keyword/මාර්ගයේ අඩංගු ඕනෑම සබැඳියක් අක්‍රීය කරනු ලැබේ

<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 ලක්ෂණයක් ඉලක්ක කළ හැකිය. විය හැකි 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;
}

හෝ විශේෂිත වෙබ් අඩවියක පීඩීඑෆ් ගොනු වෙත සබැඳි අක්‍රීය කරන්න:

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

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

බ්‍රව්සර් සහාය

IE7 සිට ගුණාංග තේරීම් සඳහා සහය දක්වයි. :not()IE9 සිට තේරීම් කාරකය.

ඔබට CSS සමඟ මෙය කළ හැකි එක් ක්‍රමයක් නම්, ඔබ divඅතුරුදහන් වීමට සකසා ඇති එතුම මත CSS එකක් සැකසීම සහ වෙනත් දෙයක් සිදුවීමයි.

උදා:

<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 සැරිසරන්න / ක්රියාකාරී රාජ්යයන්, ජාවාස්ක්රිප්ට් තුල ක්ලික් / ටැප් සිදුවීම්, සහ කර්සරය දෘශ්යමාන වේ නැද්ද යන්න ඇතුළුව - දේපළ මූසිකය / ස්පර්ශ සිද්ධීන් ආකාරය HTML අංග ප්රතිචාර පාලනය සඳහා ඉඩ ලබාදේ.

ඔබ සබැඳියක් අක්‍රීය කළ එකම ක්‍රමය එය නොවේ , නමුත් IE10 + සහ සියලුම නව බ්‍රව්සර් වල ක්‍රියා කරන හොඳ 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': '' });

ෆයර්ෆොක්ස් සහ අයිඊ 11 පරීක්ෂා කර බැලූ විට එය ක්‍රියාත්මක විය.

ඔබට මෙම 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ක්‍රියාකාරිත්වයක් ලබා දීම සඳහා විවිධ ප්‍රවේශයන් ඒකාබද්ධ කළෙමි . මෙන්න සාරාංශයක් වන අතර කේතය පහතින්.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

කෝෆ්ස්ක්‍රිප්ට් පන්තිය මෙන්න:

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 js 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();
});

තවත් උපක්‍රමයක් නම් අදෘශ්‍යමාන මූලද්‍රව්‍යයක් ඊට ඉහළින් තැබීමයි. මෙය ඕනෑම හෝවර් ආචරණයක් අක්‍රීය කරනු ඇත

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

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

පංතියට පහළින් html අයදුම් කරන්න.

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

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;අවශ්‍ය නොවන බව කරුණාවෙන් සලකන්න, නමුත් එය සබැඳිය සරල පෙළ මෙන් පෙනේ.

pointer-events:none සබැඳිය අක්‍රීය කරනු ඇත:

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