如何通过按钮单击事件禁用特定的href链接答案

【问题标题】：How to disable specific href link through buttonclick event如何通过按钮单击事件禁用特定的href链接
【发布时间】：2019-04-01 12:24:52
【问题描述】：

我有多个表，其中每一行都由一个 ID 和一个类定义。每行中的单词实际上是href links。我有一个 ID 为testbuttonba 的按钮。如果点击testbuttonba，我希望发生以下情况：

1) href 将禁用 ID table1。

2) href 的 ID table2 和 table3 仍处于启用状态。

我下面的代码不起作用（点击后所有链接仍然启用）：

HTML

<body>
<button class="btnba" id="testbtnba" onclick="function2()">BA</button>

    /* 1st Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table1">
            <tr>
                <td><a href="showdoc.html"><font size="1"><strong>A. Organisational Content</strong></font></a></td>
           </tr>
    </table>

    /* 2nd Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table2">
            <tr>
                <td><a href="showpdf.html"><font size="1"><strong>B. Basic Requirements</strong></font></a></td>
           </tr>
    </table>

    /* 3rd Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table3">
            <tr>
                <td><a href="showexcel.html"><font size="1"><strong>C. Rules and Regulations</strong></font></a></td>
           </tr>
    </table>

JavaScript

<script>
    /*diasble the first link - not working*/
    function function2() {
        document.getElementById("table1").href = "#";
    }
    return false;
</script>

【问题讨论】：

你没有 tbody 结束标签？
getElementById() 将返回没有 href 属性的元素 <tbody>。解决问题的最简单方法是将链接 href 值设置为空，或 #

标签： javascript html html-tbody

【解决方案1】：

您的脚本抓取了错误的元素。 document.getElementById("table1") 返回一个 tbody 元素，该元素上没有 href 属性。

你需要给a元素添加一个id，比如：<a id="some-id">

然后，用它来抓取链接并更改href：document.getElementById("some-id").href = "#";

【讨论】：

【解决方案2】：

please change the function 
  function function2() {

            document.getElementById("table1").getElementsByTagName('a')[0].href = "#";
        }

此代码的结果 document.getElementById("table1") 是 tbody 标签，然后您应该在此标签中找到标签 a 然后禁用 href 。我希望我的回答能给你一个想法。

【讨论】：

【解决方案3】：

您必须在 id 为 table1 的元素中找到锚标记，并如下所示禁用它。

function function2() {
    var a = document.querySelector('#table1 a');
    a.setAttribute('href','#');
}

【讨论】：

【解决方案4】：

您不应该删除<a/> 上的href（至少不以某种方式存储）。您可以创建一个切换开关，用于确定在单击按钮时是否调用 Event.preventDefault()。

这样就可以了：

let linkActive = false;
disableToggle = () => {
  linkActive = !linkActive;
}

document.querySelector('#table1 tr td a').onclick = ev => {
  if (linkActive) {
    ev.preventDefault('sd');
  }
};

.smallFont {
  font-size: 10px;
}

<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table1">
    <tr>
      <td>
        <a href="showdoc.html">
          <span class="smallFont"><strong>A. Organisational Content</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 2nd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table2">
    <tr>
      <td>
        <a href="showpdf.html">
          <span class="smallFont"><strong>B. Basic Requirements</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 3rd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table3">
    <tr>
      <td>
        <a href="showexcel.html">
          <span class="smallFont"><strong>C. Rules and Regulations</strong></span>
        </a>
      </td>
    </tr>
</table>

它在上面的 sn-p 中不起作用的原因只是因为您的选择器没有选择 <a/> 元素，这样做可以纠正：

function function2() {
  document.querySelector("#table1 tr td a").setAttribute('href', '#');
}

.smallFont {
  font-size: 10px;
}

<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table1">
    <tr>
      <td>
        <a href="showdoc.html">
          <span class="smallFont"><strong>A. Organisational Content</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 2nd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table2">
    <tr>
      <td>
        <a href="showpdf.html">
          <span class="smallFont"><strong>B. Basic Requirements</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 3rd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table3">
    <tr>
      <td>
        <a href="showexcel.html">
          <span class="smallFont"><strong>C. Rules and Regulations</strong></span>
        </a>
      </td>
    </tr>
</table>

请记住，没有办法以这种方式使用代码重新启用链接：o

更新：用一些 CSS 替换了 <font/> 标签。 <font/> 元素是 obsolete。希望对你有帮助，

【讨论】：

不要在代码中保留过时的元素。更正并让 OP 知道这一点。
@musa 我已更新我的答案以删除 <front/> 元素，因为它已过时并且可能无法在现代浏览器中使用。 developer.mozilla.org/en-US/docs/Web/HTML/Element/font
@LGSon，谢谢你通知我，我完全忽略了这一点