Javascript 禁用锚定标记的按钮

我在锚标记中有一个按钮，它是使用类定义的

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

---

锚定标签在禁用后不工作，但锚定按钮看起来仍像未禁用，即未灰显。有没有办法禁用这个按钮？如果您需要任何其他信息，请告诉我。

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

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

然后，您可以使用：disabled选择器在按钮被禁用时更改其外观：

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

---

禁用锚定标记的最佳方法是为其提供正确的属性。下面是一个简单的示例，说明如何使用一个简单的CSS行禁用锚定标记：

a{ 指针事件：无； }

---

您可以混合使用CSS和JS来实现这一点：

HTML:

JS:

此单击可防止锚定标记的默认操作，并为其指定一个类。该类具有css，可使光标显示现在允许的图标，并将背景颜色更改为灰色。

我使用了按钮和样式属性

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;
}

---

首先，内联css/js是一种糟糕的做法，可能会导致难以维护的代码和其他麻烦。第二，为什么不禁用标记并添加css以使其变灰？@Turnip抱歉，我没有看到代码您不能以这种方式禁用标记。disabled属性用于您未使用的元素。只是跟进-找到解决方案了吗@我已经添加了答案。请看一看。a标记没有禁用的属性，因此这不起作用。这并不是他们真正想问的，他们想知道如何设计它，这样它就不会看起来像一个锚。要被否决-让我知道哪里错了，这样我就可以改进我的答案：

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

background-color: Transparent;
    border: none;

<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>

.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;
}