Как отключить конкретную ссылку href через событие clickclick - PullRequest
Новая
       18

Как отключить конкретную ссылку href через событие clickclick

0 голосов
/ 31 марта 2019

У меня есть несколько таблиц, где каждая строка определяется идентификатором и классом. Слова в каждой строке на самом деле href links. У меня есть одна кнопка с идентификатором testbuttonba. Если нажата testbuttonba, я хочу, чтобы произошло следующее:

1) href для ID table1, который необходимо отключить.

2) href для идентификатора 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>

Ответы [ 4 ]

0 голосов
/ 31 марта 2019 
please change the function 
  function function2() {

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

результат этого кода document.getElementById ("table1") является тегом tbody, и затем вы должны найти тег a в этом теге и отключить href.я надеюсь, что мой ответ даст вам идею.

0 голосов
/ 31 марта 2019

Ваш скрипт захватывает не тот элемент.document.getElementById("table1") возвращает элемент tbody, для которого нет атрибута href.

Вам необходимо добавить идентификатор для элемента a, например: <a id="some-id">

Затем используйте его, чтобы захватить ссылку и изменить ссылку: document.getElementById("some-id").href = "#";

0 голосов
/ 31 марта 2019

Вы должны найти тег привязки в элементе с идентификатором table1 и отключить его, как показано ниже. 

function function2() {
    var a = document.querySelector('#table1 a');
    a.setAttribute('href','#');
}
0 голосов
/ 31 марта 2019

Вы не должны удалять href на <a/> (по крайней мере, без сохранения каким-либо образом).Вы можете создать переключатель, который будет определять, будет ли 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>

Причина, по которой он не работает в приведенном выше фрагменте кода, заключается только в том, что ваш селектор не выбирает элемент <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

Обновление: заменил теги <font/> на CSS.Элемент <font/> устарел 1030 *.Надеюсь, это поможет,

...