Html-如何禁用<a href>？

Question

我创建了一个按钮,可以在点击时打开模态窗口.

<a href="#"  data-toggle="modal" data-target="#myModal" class="signup-button gray-btn pl-pr-36" id="connectBtn"  data-role="disabled">Connect</a>

由于某种原因,data-role="disabled"这不好.我该如何禁用它？

Answer 1

您可以使用CSS来完成此任务:

<style>
    .disabled {
        pointer-events: none;
        cursor: default;
    }
</style>

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

示例: http ://jsfiddle.net/7EQJp/

或者您可以使用JavaScript来阻止默认操作,如下所示:

$('.disabled').click(function(e){
    e.preventDefault();
})

Answer 2

我创建了一个按钮......

这是你出错的地方.您还没有创建按钮,您已经创建了一个锚元素.如果您使用了button元素,则不会出现此问题:

<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
    Connect
</button>

如果您要继续使用a元素,至少应该为其role设置一个属性"button"并href完全删除该属性:

<a role="button" ...>

完成后,您可以引入一段调用的JavaScriptevent.preventDefault() - 这里event是您的点击事件.

Answer 3

<script>
    $(document).ready(function(){
        $('#connectBtn').click(function(e){
            e.preventDefault();
        })
    });
</script>

这将阻止默认操作。