ปิดใช้งานแท็ก href

แม้ว่าลิงก์นั้นจะปิดการใช้งาน แต่ก็ยังสามารถคลิกได้

<a href="/" disabled="disabled">123n</a>

ฉันจะทำให้มันไม่สามารถคลิกได้หรือไม่ถ้ามันถูกปิดการใช้งาน? ฉันควรใช้ JavaScript อย่างจำเป็นไหม?

ไม่มีแอตทริบิวต์ที่ปิดใช้งานสำหรับการเชื่อมโยงหลายมิติ หากคุณไม่ต้องการให้มีการเชื่อมโยงบางอย่างคุณจะต้องลบ<a>แท็กทั้งหมดหรือลบhrefแอตทริบิวต์ของมัน

ด้วยความช่วยเหลือของ css คุณจะปิดการเชื่อมโยงหลายมิติ ลองด้านล่าง

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

<a href="link.html" class="disabled">Link</a>

คุณสามารถใช้ได้:

<a href="/" onclick="return false;">123n</a>

คุณสามารถใช้หนึ่งในโซลูชั่นเหล่านี้:

HTML

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

ลองสิ่งนี้:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

<a>แท็กไม่ได้มีdisabledคุณลักษณะเป็นเพียงสำหรับ<input>s (และ<select>และ<textarea> s)

หากต้องการ "ปิดใช้งานลิงก์" คุณสามารถลบhrefแอตทริบิวต์หรือเพิ่มตัวจัดการคลิกที่ส่งคืนค่าเท็จ

คุณต้องลบ <a>แท็กเพื่อกำจัดสิ่งนี้

หรือลองใช้: -

  <a href="/" onclick="return false;">123n</a>

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

เคล็ดลับที่ 1: การใช้ CSS pointer-events: none;

เคล็ดลับที่ 2: การใช้ JavaScript javascript:void(0) (นี่เป็นวิธีปฏิบัติที่ดีที่สุด)

<a href="javascript:void(0)"></a>

เคล็ดลับที่ 1: การใช้ Jquery $('selector').attr("disabled","disabled");

CSS เท่านั้น: hrefนี้เอาลิงค์จากที่

.disable { 
    pointer-events: none; 
    cursor: default; 
}

การปล่อยให้ผู้ปกครองpointer-events: noneปิดใช้งานเด็กa-tagเช่นนี้ (ต้องการให้ div ครอบคลุม a และไม่มี 0 ความกว้าง / ความสูง):

<div class="disabled">
   <a href="/"></a>
</div>

ที่อยู่:

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

คุณสามารถปิดการใช้งานลิงค์โดยใช้จาวาสคริปต์ในเวลาทำงานโดยใช้รหัสนี้

$ ('. page-link'). css ("pointer-events", "none");

หากคุณต้องการที่จะกำจัดของตัวชี้ที่คุณสามารถทำเช่นนี้กับ CSS ใช้เคอร์เซอร์

คุณสามารถเลียนแบบคุณลักษณะที่ปิดใช้งานบน<a>แท็ก

<a href="link.html" disabled="">Link</a>

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

ในกรณีของฉันฉันใช้

<a href="/" onClick={e => e.preventDefault()}>

ฉันมีหนึ่ง:

<a href="#">This is a disabled tag.</a>

หวังว่ามันจะช่วยให้คุณ;)

เราไม่สามารถปิดใช้งานได้โดยตรง แต่เราสามารถทำดังต่อไปนี้

1. type="button"เพิ่ม
2. ลบhref=""แอตทริบิวต์
3. เพิ่มdisabledคุณสมบัติเพื่อให้มันแสดงให้เห็นว่ามันถูกปิดการใช้งานโดยการเปลี่ยนหลักสูตรและมันจะกลายเป็นสีจาง

ต่อไปนี้เป็นตัวอย่าง

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

ฉันสามารถบรรลุผลลัพธ์ที่ต้องการโดยใช้การดำเนินการแบบไตรภาค ng-href

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

ที่ไหน

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

ใช้ปุ่มและลิงก์อย่างถูกต้อง

•ปุ่มเปิดใช้งานฟังก์ชันการใช้งานสคริปต์บนหน้าเว็บ (กล่องโต้ตอบขยาย / ยุบภูมิภาค)

•ลิงค์นำคุณไปยังตำแหน่งอื่นไม่ว่าจะเป็นหน้าอื่นหรือตำแหน่งอื่นในหน้าเดียวกัน

หากคุณปฏิบัติตามกฎเหล่านี้จะไม่มีสถานการณ์ใด ๆ เมื่อคุณต้องปิดการใช้งานลิงก์ แม้ว่าคุณจะทำให้ลิงค์ดูปิดการใช้งานและมองเห็นได้อย่างชัดเจน onclick

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

คุณจะไม่พิจารณาความสามารถในการเข้าถึงและตัวอ่านหน้าจอจะอ่านเป็นลิงก์และผู้ที่มีความบกพร่องทางสายตาจะสงสัยอยู่เสมอว่าทำไมลิงค์ถึงไม่ทำงาน

หากคุณกำลังใช้งาน WordPress ฉันสร้างปลั๊กอินที่สามารถทำสิ่งนี้และอีกมากมายโดยไม่จำเป็นต้องรู้วิธีเขียนโค้ดอะไรเลย สิ่งที่คุณต้องทำคือเพิ่มตัวเลือกของลิงก์ที่คุณต้องการปิดการใช้งานจากนั้นเลือก "ปิดการใช้งานลิงก์ทั้งหมดด้วยตัวเลือกนี้ในแท็บใหม่" จากเมนูแบบเลื่อนลงที่ปรากฏขึ้นและคลิกอัปเดต

คลิกที่นี่เพื่อดู gif ที่แสดงถึงสิ่งนี้

คุณสามารถรับรุ่นฟรีได้จากที่เก็บปลั๊กอิน WordPress.orgเพื่อทดลองใช้

วิธีปิดการใช้งานแท็กมีหลายวิธีดังนี้:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

เนื่องจากไม่มีแอตทริบิวต์ที่ปิดใช้งานสำหรับแท็ก anchor หากคุณต้องการหยุดการทำงานของแท็กจุดยึดภายในฟังก์ชัน jQuery มากกว่าที่คุณสามารถใช้บรรทัดด้านล่างในจุดเริ่มต้นของฟังก์ชัน:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

ฉันเห็นว่ามีคำตอบมากมายที่โพสต์ไว้ที่นี่ แต่ฉันไม่คิดว่าจะมีคำตอบที่ชัดเจนซึ่งรวมวิธีการที่กล่าวถึงไปแล้วในที่ฉันพบว่าทำงานได้ นี่คือการทำให้การเชื่อมโยงทั้งสองดูเหมือนจะปิดการใช้งานและยังไม่เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอื่น

คำตอบนี้อนุมานว่าคุณกำลังใช้jQueryและbootstrapและใช้คุณสมบัติอื่นเพื่อเก็บhrefคุณสมบัติชั่วคราวขณะปิดใช้งาน

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

สิ่งใดในแท็กhrefจะแสดงที่ด้านล่างซ้ายของหน้าต่างเบราว์เซอร์เมื่อคุณวางเมาส์เหนือมัน

โดยส่วนตัวฉันคิดว่ามีบางอย่างเช่นjavascript: void (0) ที่แสดงต่อผู้ใช้เป็นเรื่องน่าเกลียด

ให้ปล่อยhref off ทำเวทมนตร์ของคุณด้วย jQuery / อะไรก็ตามและเพิ่มกฎสไตล์ (ถ้าคุณยังต้องการให้มันดูเหมือนลิงค์):

a {
    cursor:pointer;
}

คำตอบที่ดีที่สุดคือคำตอบที่ง่ายที่สุดเสมอ ไม่จำเป็นต้องเขียนโค้ดใด ๆ

หากแท็ก (a) anchor ไม่มีแอ็ตทริบิวต์ href จะเป็นตัวยึดตำแหน่งสำหรับไฮเปอร์ลิงก์เท่านั้น สนับสนุนโดยเบราว์เซอร์ทั้งหมด!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

คุณสามารถปิดการใช้งาน anchor tags โดยการคืนค่าเท็จ ในกรณีของฉันฉันใช้มุมและ ng- ปิดการใช้งานสำหรับหีบเพลง Jquery และฉันต้องปิดการใช้งานส่วน

ดังนั้นฉันจึงสร้างข้อมูลโค้ด js เล็กน้อยเพื่อแก้ไขปัญหานี้

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

หากคุณต้องการปิดการใช้งานลิงก์ชั่วคราว แต่ปล่อยให้ href อยู่ที่นั่นเพื่อเปิดใช้งานในภายหลัง (ซึ่งเป็นสิ่งที่ฉันต้องการจะทำ) ฉันพบว่าเบราว์เซอร์ทั้งหมดใช้ href แรก ดังนั้นฉันสามารถทำ:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

ตัวแปรที่เหมาะสมกับฉัน:

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

เพียงเพิ่ม: มันใช้งานได้ทั่วไป แต่จะไม่ทำงานหากผู้ใช้ปิดการใช้งานจาวาสคริปต์ในเบราว์เซอร์

1) คุณสามารถเลือกใช้ Bootstrap 3 class บนแท็ก anchor ของคุณเพื่อปิดการใช้งานแท็ก href หลังจากรวมปลั๊กอิน bootstrap 3 แล้ว

<a href="/" class="btn btn-primary disabled">123n</a>

หรือ

2) เรียนรู้วิธีเปิดใช้งาน javascript โดยใช้ html หรือ js ในเบราว์เซอร์ หรือสร้างผู้ใช้ที่บอกให้ป๊อปอัปเปิดใช้งานจาวาสคริปต์ก่อนใช้งานเว็บไซต์