Question

我在锚标记中有一个按钮（使用类对其进行了定义）。

<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px;  FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>

现在我要禁用它。所以我使用以下代码禁用了定位标记。

moreButton.disabled = true;

anchor标签在停用后仍无法正常工作，但anchor按钮仍然看起来像是未禁用（即未变灰）。有什么方法可以禁用该按钮吗？请让我知道是否需要其他信息。

Answer 1

正如其他人所说，内联CSS是一种不好的做法，因此您应该将样式代码导出到单独的CSS文件中，如下所示：

.contactButtonSmall {
  position:absolute;
  left:225px;
  top:165px; 
  font-weight:normal;
  font-size:11pt;
}

然后，您可以使用:disabled选择器来更改禁用按钮时的外观：

.contactButtonSmall:disabled {
  /* Styling for disabled button */
}

Answer 2

禁用锚标记的最佳方法是为其赋予正确的pointer-events属性。这是一个简单的示例，如何使用一条简单的CSS行禁用锚标记：

a {
  pointer-events: none;
}

<a href="https://google.com">I am a disabled anchor tag</a>

Answer 3

我使用了button和样式属性

background-color: Transparent;
    border: none;

代替锚标签来解决此问题。样式属性有助于删除原始html按钮的灰色区域，并为按钮保留自己的图像。

示例代码如下：

<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px;  FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>

在CSS文件中：

.contactButtonSmall {
    position:relative;
    display: block; /* 'convert' <a> to <div> */
    width: 60px;
    max-height: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../contactImages/blankSmallButton.gif);
    text-decoration: none;
    text-align: center;
    cursor:pointer;
    background-color: Transparent;
    border: none;
}

Answer 4

您可以混合使用CSS和JS来完成此操作：

HTML：

<a href="/" id="myLink">
    click me!
</a>

CSS：

#myLink {
    background: red
}

a#myLink.disabledLink {
    background: grey;
    cursor: not-allowed;
}

JS：

document.getElementById("myLink").onclick = function(e)
{
    e.preventDefault();
    this.className += " disabledLink";
}

jsfiddle here

单击此按钮可阻止锚标记的默认操作，并为其分配一个类。该类具有css，使光标显示now-allowed图标，并将背景颜色更改为灰色。

禁用锚标记的按钮

4 个答案: