Question

HTML就像这样：

     <div class="header">
<ul>
  <li>
     <a class="abc" id="abc" href="www.testing.com">testing</a>
  </li>
</ul>
</div>

我的javascript是这样的：

    <script language="javascript" type="text/javascript">
var links = document.getElementById("abc");
var a = links.getElementsByTagName("a");
var thisLocationHref = window.location.href;
for(var i=0;i<a.length;i++)
{

  var tempLink = a[i];      

  if(thisLocationHref === tempLink.href)
  {
      tempLink.style.backgroundColor="red";
  }
  else
  {
      tempLink.style.backgroundColor="blue";
  }
}

我无法删除标签中的ID，因为它与另一个页面相关。我知道代码中有问题，但无法弄清楚在哪里。欢迎任何帮助！谢谢！

Answer 1

不是style.background，style.backgroundColor：

var links = document.getElementById("abc");
var a = links.getElementsByTagName("a");
var thisLocationHref = window.location.href;
for (var i = 0; i < a.length; i++) {

    var tempLink = a[i];

    if (thisLocationHref === tempLink.href) {
        tempLink.style.backgroundColor = "red";
    } else {
        tempLink.style.backgroundColor = "blue";
    }
}

Answer 2

将id="abc"提供给ul并将其从a标记中删除，您的代码就可以使用。

演示： http://jsfiddle.net/BgbjD/

来自MDN：

<强> element.getElementsByTagName

返回具有给定标记名称的元素列表。子树   搜索指定元素下面的元素   本身。

所以你必须搜索ul节点。

<div class="header">
    <ul id="abc">
        <li> <a class="abc">testing</a>
        </li>
    </ul>
</div>

您的JavaScript不需要任何更改。

按ID更改标签背景颜色

2 个答案: