Question

所以我使用锚标签创建了一些帮助，以便当用户将鼠标悬停在“？”上时他们可以看到一个带有一些说明的小盒子。它运行良好，但当用户点击“？”链接它将转到页面顶部。所以我想知道是否有办法禁止该事件发生......

HTML：

<a class="questions" href="#" title="instructions are here">?</a>

CSS：

.questions:link{
    color:#fff;
    background-color:#feb22a;
    width:12px;
    height:12px;
    display:inline-block;
    border-radius:100%;
    font-size:10px;
    text-align:center;
    text-decoration:none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}

我试图使用这样的东西，但是它会禁用指令。

此：

.not-active {
   pointer-events: none;
   cursor: default;
}

Answer 1

title属性是global attribute，因此您可以在其他元素上使用它，例如跨度，这不会导致跳转：

<span class="questions" href="#" title="instructions are here">?</span>

Answer 2

@jeremy 嘿，您可以使用jquery来阻止锚标记的默认操作

<script>
    $(function () {
        $('a .questions').on("click", function (e) {
             e.preventDefault();
        });
    });
</script>

<!-- html code here -->

<a class="questions" href="#" title="instructions are here">?</a>

Answer 3

如果你还没有使用jquery或者不想为此包含jquery库，你总是可以使用普通的javascript来阻止点击行为：

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

如何使Anchor标签显示标题而不使其可点击

3 个答案: