มีวิธีการปิดการใช้งานลิงค์โดยใช้ 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 มีวิธีแก้ไขเฉพาะหน้า ดูคำตอบนี้

คำเตือน: การใช้pointer-eventsCSS ในองค์ประกอบที่ไม่ใช่ SVG นั้นเป็นการทดลอง คุณลักษณะที่เคยเป็นส่วนหนึ่งของข้อมูลจำเพาะร่าง CSS3 UI แต่เนื่องจากปัญหาการเปิดจำนวนมากได้ถูกเลื่อนออกไปเป็น CSS4

CSS สามารถใช้เพื่อเปลี่ยนสไตล์ของบางสิ่งเท่านั้น สิ่งที่ดีที่สุดที่คุณสามารถทำได้กับ CSS บริสุทธิ์คือการซ่อนลิงก์ทั้งหมด

สิ่งที่คุณต้องการจริงๆคือจาวาสคริปต์ นี่คือวิธีที่คุณจะทำสิ่งที่คุณต้องการโดยใช้ห้องสมุด jQuery

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

CSS ทำเช่นนั้นไม่ได้ CSS ใช้สำหรับการนำเสนอเท่านั้น ตัวเลือกของคุณคือ:

• อย่ารวมhrefแอตทริบิวต์ใน<a>แท็กของคุณ
• ใช้ JavaScript เพื่อค้นหาองค์ประกอบจุดยึดกับสิ่งclassนั้นและลบhrefหรือonclickแอตทริบิวต์ของมันตามลำดับ jQuery จะช่วยคุณในเรื่องนั้น (NickF แสดงวิธีทำสิ่งที่คล้ายกัน แต่ดีกว่า)

Bootstrap Disabled Link

<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 แต่ดูเหมือนลิงค์

<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://stackoverflow.com//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;
}

หรือปิดการใช้งานลิงก์ไปยังไฟล์ pdf ของเว็บไซต์เฉพาะ:

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

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

รองรับเบราว์เซอร์

ตัวเลือกคุณสมบัติได้รับการสนับสนุนตั้งแต่ IE7 :not()ตัวเลือกตั้งแต่ IE9

วิธีหนึ่งที่คุณสามารถทำได้ด้วย 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>

คุณสมบัติตัวชี้เหตุการณ์ช่วยให้สามารถควบคุมวิธีการองค์ประกอบ HTML ตอบสนองต่อเหตุการณ์เมาส์ / สัมผัส - รวมถึง CSS เลื่อน / สถานะใช้งานคลิก / แตะเหตุการณ์ใน Javascript และเคอร์เซอร์จะมองเห็นหรือไม่

นี่ไม่ใช่วิธีเดียวที่คุณจะปิดการใช้งานลิงก์แต่เป็นวิธี CSS ที่ดีซึ่งทำงานใน IE10 + และเบราว์เซอร์ใหม่ทั้งหมด:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

ฉันค้นหาผ่านทางอินเทอร์เน็ตและพบว่าไม่ดีกว่านี้ โดยพื้นฐานแล้วจะปิดใช้งานฟังก์ชันการคลิกปุ่มเพียงเพิ่มสไตล์ CSS โดยใช้ jQuery ดังนี้:

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

จากนั้นให้เปิดใช้งานอีกครั้งทำสิ่งนี้

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

ตรวจสอบกับ Firefox และ IE 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()

นี่คือคลาส 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

นอกจากนี้คุณยังสามารถปรับขนาดองค์ประกอบอื่นเพื่อให้ครอบคลุมการเชื่อมโยง (โดยใช้ดัชนีซีด้านขวา): นั่นจะ "กิน" การคลิก

(เราค้นพบสิ่งนี้โดยไม่ได้ตั้งใจเพราะเรามีปัญหากับลิงค์ที่ไม่ใช้งานในทันทีเนื่องจากการออกแบบ "ตอบสนอง" ทำให้ 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;
}

เป็นไปได้ที่จะทำใน 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>