Question

我的困境相当简单：此函数根据id的父<li>获取此id元素的<ul>。它过去工作正常，但不是更多，我需要<ul>使用class es而不是id，同时仍然可以指定id'当前'到当前元素，或改变我的CSS。

function myFunction(element) {
  liArray = document.getElementById("leftlist").childNodes;
  i = 0;
  while (liArray[i]) {
    liArray[i].id = "";
    i++;
  }
  element.id = "current"; // or element.className  ?
}

ul#leftlist {
  background-color: rgb(205, 205, 205);
}

ul#leftlist li#current a {
  color: rgb(96, 176, 255);
  background-color: 218, 218, 218);
}

ul#leftlist li a {
  color: rgb(86, 86, 86);
}

#leftlist a:link {
  color: rgb(86, 86, 86);
  background-color: #ddd;
}

#leftlist a:active {
  color: rgb(96, 176, 255);
  background-color: rgb(218, 218, 218);
}

<ul id="leftlist">
  <li onClick='myFunction(this);'>
    <a href="123" bla bla </a></li>
  <li onClick='myFunction(this);'> .... etc.</li>
</ul>

也许我需要改变我的CSS。之前有效，但现在id效果不佳，因为即使我通过JavaScript分配ul#leftlist li a，id="current"也具有优先权。

Answer 1

你应该使用类来表示“当前”，而不是id。 id通常不应该改变，并且“current”不是一个非常好的id，因为你可能在页面上有一堆东西以某种方式“当前”。如果你需要一些css样式来覆盖另一个，你可以使用！important：

强制它

ul#leftlist li.current a {
  color: rgb(96,176,255) !important;
  background-color:218,218,218) !important;
}

Answer 2

我建议你使用jQuery框架。它将为您的DOM提供一个很好的抽象，使您更容易在DOM中查找对象并为这些对象分配事件。

尝试在this tutorial阅读jQuery.com。我相信它会让你感到惊讶：）

Answer 3

看起来您需要在css中更改一行：

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color:218,218,218);}

在rgb(之后错过了background-color，看起来应该是这样的：

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color: rgb(218,218,218);}

我也同意Erlend，current更适合上课。

Answer 4

该功能变为：

function myFunction(element){
  var liArray = document.getElementById("leftlist").childNodes;
  var i=0, item;
  while (item = liArray[i++]) {
    if (item.nodeType === 1) {
      item.className = item.className.replace(/(^| )current( |$)/g, '');
    }
  }
  element.className += " current";
}

CSS也需要更改为类：

ul#leftlist li.current a { ... }

Answer 5

您是否以某种方式进行更改，以便最终得到多个具有相同ID的元素？ - ）

这显然违背了整个想法，使用id它们必须在html文档的上下文中完全独特...

- 首先，你应该做的是确保你只解决你的元素：

liArray=element.parentNode.getElementsByTagName("li");

其次可能是一个想法，通过在选择器中设置更多内容来确保您的某个选择器具有更高的优先级：

如果在标记上使用内联样式属性，则会获得最高优先级，但这似乎没有任何用处。

ID提供高优先级，类提供公平优先级，元素和伪选择器提供低优先级...

但是，每种类型的优先级都会累积，通过这种方式，您可以通过将一个选择器置于同一优先级类型的另一个选择器中来为其提供非常高的优先级：

ul#leftlist给出高优先级1点和低优先级1点

#myParent ul#leftlist得到2分高优先级，1分低版

.myParent ul#leftlist高优先级1分，公平优先级1分，低优先级1分

因此，您可以在样式表中区分选择器的优先级！ - ）

JavaScript函数'通过父类获取元素'并分配

5 个答案: