Làm cách nào để tắt liên kết href trong JavaScript?

Tôi có một thẻ <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>và trong một số điều kiện, tôi muốn thẻ này bị vô hiệu hóa hoàn toàn.

Mã từ nhận xét (đây là cách liên kết được tạo)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

Hãy thử điều này khi bạn không muốn người dùng chuyển hướng khi nhấp chuột

<a href="javascript: void(0)">I am a useless link</a>

bạn có thể hủy kích hoạt tất cả các liên kết trong một trang có lớp kiểu này:

a {
    pointer-events:none;
}

bây giờ tất nhiên thủ thuật là chỉ hủy kích hoạt các liên kết khi bạn cần, đây là cách thực hiện:

sử dụng một lớp A trống, như thế này:

a {}

thì khi bạn muốn hủy kích hoạt các liên kết, hãy làm như sau:

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

LƯU Ý: Tên quy tắc CSS được chuyển đổi thành chữ thường trong một số trình duyệt và mã này phân biệt chữ hoa chữ thường, vì vậy tốt hơn hãy sử dụng tên lớp viết thường cho điều này

để kích hoạt lại các liên kết:

GetStyleClass('a').pointerEvents = ""

kiểm tra trang này http://caniuse.com/pointer-events để biết thông tin về khả năng tương thích của trình duyệt

Tôi nghĩ đây là cách tốt nhất để làm điều đó, nhưng thật đáng buồn là IE, như mọi khi, sẽ không cho phép nó :) Dù sao thì tôi vẫn đăng bài này, vì tôi nghĩ nó chứa thông tin có thể hữu ích và bởi vì một số dự án sử dụng một trình duyệt biết , như khi bạn đang sử dụng chế độ xem web trên thiết bị di động.

Nếu bạn chỉ muốn hủy kích hoạt MỘT liên kết (tôi chỉ nhận ra đó là câu hỏi), tôi sẽ sử dụng một chức năng thủ công đặt url của trang hiện tại, hoặc không, dựa trên điều kiện đó. (như giải pháp bạn đã chấp nhận)

câu hỏi này dễ hơn tôi nghĩ rất nhiều :)

Bạn chỉ cần cung cấp cho nó một hàm băm trống:

anchor.href = "#";

hoặc nếu điều đó không đủ tốt cho "vô hiệu hóa", hãy sử dụng trình xử lý sự kiện:

anchor.href = "javascript:void(0)";

Hãy thử điều này bằng cách sử dụng jQuery:

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

anchor.href = null;

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

Tôi thấy cách này dễ thực hiện hơn. Và nó có ưu điểm là bạn js. Không nằm trong html của bạn mà nằm trong một tệp khác. Tôi nghĩ rằng không có sự cởi trói. Cả hai sự kiện vẫn đang hoạt động. Không chắc. Nhưng theo một cách nào đó, bạn chỉ cần một sự kiện này

MDN khuyên bạn nên element.removeAttribute(attrName);đặt thuộc tính thành null (hoặc một số giá trị khác) khi bạn muốn tắt nó. Trong trường hợp này, nó sẽ làelement.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Cách dễ nhất để vô hiệu hóa một liên kết đơn giản là không hiển thị nó. Chạy chức năng này bất cứ khi nào bạn muốn kiểm tra xem điều kiện của bạn có được đáp ứng để ẩn nút Trước (thay thế if (true)bằng điều kiện của bạn):

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

Sau đó chạy testHideNav()bất cứ khi nào bạn cần kiểm tra xem tình trạng của bạn có thay đổi hay không.

Thay vào đó hãy sử dụng một span và một cú nhấp chuột javascript. Một số trình duyệt "nhảy" nếu bạn có một liên kết và "#" href.

Điều này cũng có thể:

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

Liên kết không đi đâu cả bởi chức năng của bạn sẽ được thực thi.

Tôi cũng có nhu cầu tương tự, nhưng động lực của tôi là ngăn liên kết bị nhấp đúp. Tôi đã hoàn thành nó bằng cách sử dụng jQuery:

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

HTML trông giống như sau:

<a href='javascript: void(0);' id="myLink">click here</a>

Vì vậy, các giải pháp trên làm cho liên kết không hoạt động, nhưng không làm cho nó hiển thị (AFAICT) rằng liên kết không còn hợp lệ. Tôi gặp một tình huống trong đó tôi có một loạt trang và muốn vô hiệu hóa (và làm rõ rằng nó bị vô hiệu hóa) liên kết trỏ đến trang hiện tại.

Vì thế:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

Thao tác này sẽ lướt qua danh sách các liên kết, tìm liên kết trỏ đến trang hiện tại (n_root3 có thể là một thứ cục bộ, nhưng tôi tưởng tượng documentphải có một cái gì đó tương tự) và thay thế liên kết bằng nội dung văn bản liên kết.

HTH

Cảm ơn tất cả...

Vấn đề của tôi đã được giải quyết bằng mã dưới đây:

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

Cài đặt plugin này cho jquery và sử dụng nó

http://plugins.jquery.com/project/jqueryenabledisable

Nó cho phép bạn tắt / bật khá nhiều trường trong trang.

Nếu bạn muốn mở một trang với điều kiện nào đó, hãy viết một hàm java script và gọi nó từ href. Nếu điều kiện thỏa mãn, bạn mở trang, nếu không thì chỉ cần làm gì.

mã trông như thế này:

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

Bạn cũng có thể đặt liên kết trong một div và đặt thuộc tính hiển thị của thuộc tính Style thành không. điều này sẽ ẩn div. Ví dụ:

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

Điều này sẽ ẩn liên kết. Sử dụng một nút hoặc một hình ảnh để hiển thị div này ngay bây giờ bằng cách gọi hàm này trong onclick là:

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

Bạn cũng có thể đặt một thẻ id vào thẻ html, vì vậy nó sẽ là

<a id="myATag" href="whatever"></a>

Và lấy id này trên javascript của bạn bằng cách sử dụng

document.getElementById("myATag").value="#"; 

Một trong số này chắc chắn phải hiệu quả haha

Một phương pháp khác để tắt liên kết

element.removeAttribute('href');

thẻ liên kết không có href sẽ phản ứng dưới dạng bị vô hiệu hóa / văn bản thuần túy

<a> w/o href </a>

thay vì <a href="#"> with href </a>

xem jsFiddel

hy vọng điều này là tốt.

Thay vì void, bạn cũng có thể sử dụng:

<a href="javascript:;">this link is disabled</a> 

0) bạn nên nhớ rằng Một số trình duyệt sẽ "nhảy" nếu bạn có một liên kết và href "#". Vì vậy, cách tốt nhất sẽ là một JavaScript tùy chỉnh

1) Nếu bạn theo đuổi JavaScript tùy chỉnh , thì đây là:

<a href="#" onclick="DoSomething(); return false;">Link</a>

"Return false" ngăn liên kết thực sự được theo dõi.

2) Bạn có thể cân nhắc tránh sử dụng sau

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

hoặc là

  <a href="javascript:;" onclick="DoSomething();">Link</a>

Bởi vì giao thức giả javascript có thể đưa trang vào trạng thái chờ trong một số trình duyệt, điều này có thể gây ra những hậu quả không mong muốn. IE6 được biết đến với nó. Nhưng nếu bạn không quan tâm đến IE6 và bạn đang thử nghiệm mọi thứ - thì đó có thể là một giải pháp tốt.

3) Nếu bạn đã có jQueryvà bootstraptrong dự án của mình, bạn có thể xem xét sử dụng chúng như sau:

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

nơi mà .disabledlớp học sẽ tạo thành bootstrap.

Trang web bootstrap biểu mẫu Qupte ( tại đây )

Báo trước chức năng liên kết

Lớp .disabled sử dụng pointer-events: noneđể cố gắng vô hiệu hóa chức năng liên kết của s, nhưng thuộc tính CSS đó chưa được chuẩn hóa. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ sự kiện con trỏ: không, điều hướng bàn phím vẫn không bị ảnh hưởng, có nghĩa là người dùng bàn phím có tầm nhìn và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để an toàn, hãy thêm một tabindex="-1"thuộc tính trên các liên kết này (để ngăn chúng nhận tiêu điểm bàn phím) và sử dụng custom JavaScriptđể tắt chức năng của chúng.

và custom JavaScriptđã được hiển thị trong phần 1

Dưới đây là mã cho các liên kết bị vô hiệu hóa:

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

một giải pháp rất đơn giản khác là:

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

Giải pháp đầu tiên là hiệu quả.