javascript - 更改标签颜色

Question

我使用 javascript 选项卡根据选项卡选择显示内容。它工作完美。只有我想改变的是选项卡的背景颜色。我需要在四个单独的选项卡上显示 4 种不同的背景颜色。内联 css 不起作用，因为它是从 javascript 文件调用的。我从这里得到代码:http://www.barelyfitz.com/projects/tabber/

代码:

HTML:

 <div class="tabber">
 <div class="tabbertab" style="background:#dadada">
 <h2 style="font-size:18px;">HR Policies</h2>
 <p>Content Display.</p>
 </div>

CSS:

  ul.tabbernav li a {
  background: #DDE;
  }

以上是所有选项卡的默认背景颜色。

Javascript:

  if (!t.headingText) {
  /* Title was not found (or is blank) so automatically generate a
     number for the tab.
  */
  t.headingText = i + 1;
 }

 /* Create a list element for the tab */
 DOM_li = document.createElement("li");

 /* Save a reference to this list item so we can later change it to
   the "active" class */
 t.li = DOM_li;

 /* Create a link to activate the tab */
 DOM_a = document.createElement("a");
 DOM_a.appendChild(document.createTextNode(t.headingText));
 DOM_a.href = "javascript:void(null);";
 DOM_a.title = t.headingText;
 DOM_a.onclick = this.navClick;

 /* Add some properties to the link so we can identify which tab
   was clicked. Later the navClick method will need this.
 */
 DOM_a.tabber = this;
 DOM_a.tabberIndex = i;

 /* Do we need to add an id to DOM_a? */
  if (this.addLinkId && this.linkIdFormat) {

  /* Determine the id name */
  aId = this.linkIdFormat;
  aId = aId.replace(/<tabberid>/gi, this.id);
  aId = aId.replace(/<tabnumberzero>/gi, i);
  aId = aId.replace(/<tabnumberone>/gi, i+1);
  aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

  DOM_a.id = aId;
 }

 /* Add the link to the list element */
 DOM_li.appendChild(DOM_a);

 /* Add the list element to the list */
 DOM_ul.appendChild(DOM_li);
 }

Answer 1

最好使用具有更高特异性的选择器来覆盖默认颜色，而不是 !important，

尝试

.tabberlive ul.tabbernav li a {
 background: #DDE;
}

您可以按如下方式为每个选项卡着色:fiddle

.tabberlive ul.tabbernav li:nth-child(1) a {
 background: cyan; /* color for 1st tab */
}
.tabberlive ul.tabbernav li:nth-child(2) a {
background: silver; /* color for 2nd tab */
}
.tabberlive ul.tabbernav li:nth-child(3) a {
background: yellow; /* color for 3rd tab */
}
.tabberlive ul.tabbernav li:nth-child(4) a {
background: cyan; /* color for 4th tab */
}

等等