it-swarm-eu.dev

Jak zakázat odkaz pouze pomocí CSS?

Existuje nějaký způsob, jak zakázat odkaz pomocí CSS?

Mám třídu nazvanou current-page a chci, aby byly odkazy s touto třídou zakázány, aby nedošlo k žádné akci, když na ně kliknete.

785
RSK

Odpověď je již v komentářích k této otázce. Pro lepší viditelnost kopíruji toto řešení zde:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

Podpora prohlížeče naleznete na adrese https://caniuse.com/#feat=pointer-events . Pokud potřebujete podpořit IE, existuje řešení; viz tato odpověď .

Upozornění: Použití pointer-events v CSS pro elementy jiné než SVG je experimentální. Tato funkce byla součástí specifikace návrhu CSS3 UI, ale vzhledem k mnoha otevřeným otázkám byla odložena na CSS4.

1271
RSK

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

127
amir

CSS lze použít pouze ke změně stylu něčeho. To nejlepší, co byste mohli dělat s čistým CSS, je skrýt odkaz úplně.

Co opravdu potřebujete je nějaký javascript. Zde je vysvětleno, jak byste měli dělat to, co chcete, pomocí knihovny jQuery.

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

CSS to nemůže udělat. CSS slouží pouze pro prezentaci. Vaše možnosti jsou:

  • Nepřidávejte atribut href do tagů <a>.
  • Použijte JavaScript, abyste našli prvky kotvy s tímto class a odpovídajícím způsobem odstraňte jejich href nebo onclick atributy. jQuery by vám s tím pomohl (NickF ukázal, jak dělat něco podobného, ​​ale lepšího).
32
Kevin Conner

Odkaz na zaváděcí systém

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

Tlačítko Bootstrap Disabled, ale vypadá to jako odkaz

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

Atribut href můžete nastavit na javascript:void(0)

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

19
Xinus

Pokud se chcete na formuláři držet pouze HTML/CSS, další možností je použít tlačítko. Styl a nastavení atributu disabled.

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

10
Sebastian Patten

Jediný způsob, jak to udělat bez CSS, by bylo nastavit CSS na balicí div, která by ztratila a něco jiného by to bylo místo.

NAPŘ:

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

S CSS

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

Chcete-li skutečně vypnout A budete muset nahradit je to click event nebo href, jak je popsáno ostatními.

PS: Jen k objasnění bych to považoval za poměrně neuspořádané řešení a pro SEO to není nejlepší ani já, ale věřím, že je to nejlepší s čistě CSS.

10
fyjham

Pokud chcete, aby se jednalo pouze o CSS, měla by být zakázaná logika definována pomocí CSS.

Chcete-li logiku v definicích CSS přesunout, budete muset použít selektory atributů. Zde jsou nějaké příklady :

Zakázat odkaz, který obsahuje přesný soubor: =

Můžete zakázat odkazy, které obsahují specifickou hodnotu href, jako je tato:

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

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

Zakázat odkaz obsahující kousek cesty: *=

Veškeré odkazy obsahující cestu /keyword/in budou zakázány

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

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

Zakázat odkaz začínající na: ^=

operátor [attribute^=value] cílí atribut, který začíná specifickou hodnotou. Umožňuje zrušit webové stránky a kořenové cesty.

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

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

Můžete ji dokonce použít k zakázání odkazů bez https. Například :

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

Zakázat odkaz, který končí: $=

Operátor [attribute$=value] cílí atribut, který končí specifickou hodnotou. Může být užitečné zrušit přípony souborů.

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

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

Nebo jakýkoli jiný atribut

Css může cílit na libovolný atribut HTML. Může to být rel, target, data-custom a tak dále ...

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

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

Kombinace selektorů atributů

Můžete řetězit více pravidel. Řekněme, že chcete zakázat všechny externí odkazy, ale ne ty, které směřují na vaše webové stránky:

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

Nebo zakažte odkazy na soubory PDF konkrétní webové stránky:

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

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

Podpora prohlížeče

Selektory atributů jsou podporovány od IE7. :not() selektor od IE9.

9
Creaforge

Zkuste to:

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

Vlastnost pointer-events umožňuje kontrolu nad tím, jak elementy HTML Reagují na události myši/dotyku - včetně přechodu na CSS/aktivní stavy, Události kliknutí/klepnutí v jazyce Javascript a zda nebo není kurzor viditelný.

To je ne jediný způsob, jak vypnout Link , ale dobrý způsob CSS, který pracuje v IE10 + a všech nových prohlížečích:

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

7
Alireza

Hledal jsem přes internet a nenašel jsem nic lepšího než to . V podstatě zakázat funkci kliknutí na tlačítko, stačí přidat styl CSS pomocí příkazu jQuery:

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

Pak to znovu povolte

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

Zaškrtnuto ve Firefoxu a IE 11, fungovalo to.

5
Faisal Mq

Díky všem, kteří zaslali řešení, jsem zkombinoval několik přístupů, abych poskytl některé pokročilejší funkce disabled. Zde je Gist , a kód je níže.

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

Zde je třída coffescript:

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

můžete použít tento 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>

3
javad shariaty

Demo zde
Zkus tohle

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

Použil jsem:

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

A nestačilo; v některých prohlížečích stále zobrazuje odkaz a bliká.

Musel jsem přidat:

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

Můžete také velikost jiného prvku tak, aby pokrývaly odkazy (pomocí pravého z-indexu): To bude "jíst" kliknutí. 

(To jsme zjistili náhodou, protože jsme měli problém s náhle neaktivními odkazy v důsledku "citlivého" designu, který způsobil, že je H2 pokryl, když bylo okno prohlížeče mobilní.)

1

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

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

0
Rudra

Je to možné v CSS

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

Viz:

Vezměte prosím na vědomí, že text-decoration: none; a color: black; není potřeba, ale odkaz vypadá spíše jako prostý text.

0
user8903269

pointer-events:none zakáže odkaz:

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