logo标签列表

在HTML中，如何实现点击一次后禁用href链接？

javascriptjqueryhtml
15

我希望在单击后禁用 href，是否可以使用 JavaScript 或 jQuery 完成？

请帮忙。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
  <head>
    <style>

     a:link{
       color:#1DAAA1;
     }

     a:visited{
       color:green;
     }

     a:hover{
       background: #ff0000;
       color: #FFF;
     }

    </style>
  </head>
  <body>
    <table width="500" align="center" border="5px solid">
      <tr align="center" >
        <td><a href="http://www.google.com.my/" onclick="return false"> Google </a></td>
        <td><a href="http://www.yahoo.com/"> Yahoo </a></td>
        <td><a href="http://www.bing.com/"> Bing </a></td>
        <td><a href="http://en.wikipedia.org/wiki/Main_Page"> Wikipedia </a></td>
        <td><a href="https://www.facebook.com/"> Facebook </a></td>                         
     </tr>
    </table>
  </body>
</html>
对于jQuery，请查看.removeAttr。 - Luke94
嗨，找到了新的答案...希望它能满足你的需求 :) - Ayyappan Sekar
“disabled”是什么意思？无法点击的？ - Jim Blackler
1
是的，在点击一次或访问一次后不可点击。 - Karthik Raj
10个回答
66

纯 JavaScript 解决方案：

<script> 
   function clickAndDisable(link) {
     // disable subsequent clicks
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   
</script>
<a href="target.html" onclick="clickAndDisable(this);">Click here</a>
8

这是使用 jQuery 的更简单的方法，可以防止链接双击：没有 onclick 属性，不需要 id，不删除 href。

$("a").click(function (event) {
    if ($(this).hasClass("disabled")) {
        event.preventDefault();
    }
    $(this).addClass("disabled");
});

提示：您可以使用任何选择器（如button、input[type='submit']等），它都可以正常工作。

完美的解决方案，我可以排除链接吗？ - MrPHP
1
先生PHP，没错，你可以使用任何选择器，例如，可以使用$("button")代替$("a")。 - Dmytro
对于我来说：在jQuery 3.4.1中什么也不做。 - Michael Rogers
5

只需尝试这个...

a:visited {
 color:green;
 pointer-events: none;
 cursor: default; 
}
3
警告：CSS 中用于非 SVG 元素的 pointer-events 是实验性的。 - John Dvorak
仍然，对于使用较少知名的CSS属性之一提出创意解决方案，我给予+1的赞扬。 - John Dvorak
@JanDvorak：谢谢你的 +1，希望我能很快带来更好的作品 :) - Ayyappan Sekar
它不起作用了，我仍然可以访问已访问的页面……在点击一次后，必须完全禁用已访问链接。 - Karthik Raj
4

纯JavaScript解决方案，允许用户仅跟随URL一次：

<a id="elementId" 
   href="www.example.com" 
   onclick="setTimeout(function(){document.getElementById('elementId').removeAttribute('href');}, 1);"
   >Clik and forget</a>

点击后，此操作将删除href属性（等待1毫秒以允许原始操作开始），使链接静默。与Dineshkani建议的类似，但原始答案在某些浏览器上导致操作根本不开始。

1

这次我尝试使用JavaScript...希望能对您有所帮助:)只需在所需的href标签的"onclick()"中调用下面的函数即可...

​function check(link) {
    if (link.className != "visited") {
       //alert("new");
       link.className = "visited";
       return true;     
    }
    //alert("old");
    return false;
}​​

像这样 <a href="#" onclick="return check(this);">在此添加链接</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 并查看演示 在这里

0

你可以使用jQuery实现

<a href='http://somepage.com' id='get' onlick='$("#"+this.id).attr("href","")'>Something to be go </a>

或者使用 JavaScript

<a href='http://somepage.com' id='get' onlick='document.getElementById(this.id).removeAttribute("href");'>Something to be go </a>
0

在HTML和CSS中复制相同的div，复制的div必须在原始div下面使用：z-index=-1或/和position:absolute。

使原始div onclick="HideMe(this)"

JS:
<script type="text/javascript">
function HideMe(element){
element.style.display='none';
}
</script>

这可能不是最好的方法，但100%可以实现目标。

请记住：重复的div/anchor标签不能包含href属性。 - Omar N Shamali
0

根据Ayyappan Sekar的答案，我刚刚使用jQuery完成了非常相似的事情：

$('#yourId').click(function (e) {
    if(!$(this).hasClass('visited'))
    {
        $(this).addClass('visited')
        return true;
    }
    else
    {
        $(this).removeAttr("href"); // optional
        // some other code here
        return false;
    }
});
0

我想在这里留下一个使用Knockout.js的示例，我将其与IFrame一起使用，但由于IFrame无法使用本地文件，因此我使用divs创建了此示例。 当您单击链接时，函数被调用，正如您可以在alert()中看到的那样，但是当您在输入对话框中拨号并再次单击链接时，Knockout.js不会更新div，除非您单击另一个调用相同函数但具有不同参数的链接。

<html>
    <head>
        <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
    </head>
    <body>
        <div>
            <a href="javascript:fAlter(2)">Page 2</a>
        </div>
        <div>
            <a href="javascript:fAlter(3)">Page 3</a>
        </div>
        <div data-bind="bindHTML: dados"></div>
        <script type="text/javascript">
           function myPage2(nPage) {
               var cPage = '<div>Pagina 2</div>';
               if (nPage == 3) { cPage = '<div>Pagina 3</div>' }
               cPage += '<input type="text" id="fname" name="fname">';
               //alert('clicked!');
               return cPage
           }
           var viewModel =  {
                dados : ko.observable()
           }
           ko.bindingHandlers.bindHTML = {
                init: function () {
                     // Prevent binding on the dynamically-injected HTML (as developers are unlikely to expect that, and it has security implications)
                     return { 'controlsDescendantBindings': true };
           },
                update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                     // setHtml will unwrap the value if needed
                     ko.utils.setHtml(element, valueAccessor());
                     var elementsToAdd = element.children;
                     for (var i = 0; i < elementsToAdd.length; i++) {
                          ko.cleanNode(elementsToAdd[i]); //Clean node from Knockout bindings
                          ko.applyBindings(bindingContext, elementsToAdd[i]);
                     }
                }
           };
           ko.applyBindings(viewModel);
           viewModel.dados(myPage2(2));
           function fAlter(nPage) {
               viewModel.dados(myPage2(nPage));
           }
       </script>
    </body>
</html>
-1

jQuery解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        
        <script type="text/javascript">
            function check(link) {
                $(link).replaceWith($(link).text());
            }
        </script>
        <style>

            a:link{
                color:#1DAAA1;

            }
            a:visited{
                color:green;
            }
            a:hover{
                background: #ff0000;
                color: #FFF;
            }

        </style>

    </head>
    <body>

        <table width="500" align="center" border="5px solid">
            <tr align="center" >
                <td><a href="http://www.google.com" target="_blank" onclick="return check(this);"> Google </a></td>
                <td><a href="http://www.yahoo.com" target="_blank" onclick="return check(this);"> Yahoo </a></td>
                <td><a href="http://www.bing.com" target="_blank" onclick="return check(this);"> Bing </a></td>
                <td><a href="http://en.wikipedia.org" target="_blank" onclick="return check(this);"> Wikipedia </a></td>
            </tr>

        </table>
    </body>
</html>
你为什么要使用jQuery而不是绑定事件呢？ - Stephan Muller
@StephanMuller：我想让href在点击后被禁用，是否可以使用JavaScript或jQuery实现？-问题已经很明确了。 - IT ppl
它很有用，但仍然可以在重新加载/刷新页面后访问。 - Karthik Raj
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接