Question

我有这样的HTML 如何使用javascript将ID添加到HTML href

<div class="tab">
    <a href="#">exp</a>
</div>
<div class="tab">
    <a href="#">exp</a>
</div>
<div class="tab">
    <a href="#">exp</a>
</div>
<script>
    var els = document.getElementsByClassName("tab"); 
    // loops els
    for(var i = 0, x = els.length; i < x; i++) {
        els[i].onclick = function(){
        x = document.querySelector(".tab> a")
            // do something
            x.id = "expid";
        }
    }
</script>

我想在单击此ID时将其添加到每个标签中。请帮助我。非常感谢

Answer 1

您对document.querySelector()的调用总是返回文档中的第一个.tab > a链接。您可以this.querySelector()返回您单击的DIV中的链接。

我已经更改了代码，以使用类而不是ID，因为您不应有重复的ID。

遍历所有DIV。如果是用户单击的DIV，则添加该类，否则将其删除。

var els = document.getElementsByClassName("tab");
// loops els
for (var i = 0, x = els.length; i < x; i++) {
  els[i].onclick = function() {
    for (var j = 0; j < els.length; j++) {
      x = els[j].querySelector("a");
      if (els[j] == this) {
        x.classList.add("expid");
      } else {
        x.classList.remove("expid");
      }
    }
  }
}

.expid {
  background-color: yellow;
}

<div class="tab">
  <a href="#">exp</a>
</div>
<div class="tab">
  <a href="#">exp</a>
</div>
<div class="tab">
  <a href="#">exp</a>
</div>

Answer 2

<div class="tabs">
  ... your html code.
</div>


const tabs = document.querySelector('.tabs')

tabs.addEventListener('click', event => {
   const aTag = event.target
   if (aTag.tagName !== 'A') return
   aTag.id = `EXPID#${getIndexIn(aTag, tabs)}`
})

function getIndexIn(element, parent): number

这是什么意思？

Answer 3

const anchors = document.getElementsByTagName('a');
const ids= [1,2,3,4,5];
let index =0 ;
  for(let a of anchors ){
      a.href=ids[index++]
    }

您可以尝试这种方式，这是我使用纯js进行的最酷，最简单的操作

如何使用JavaScript在点击时向<a href>添加ID

3 个答案: