javascript - 我想改变所有兄弟元素的样式

Question

我正在为标签式导航界面使用按钮。我想让事件标签为红色，其余标签为黑色。

<div class="tabs">
<button type="button" onclick="selectTab(this);">Astringents</button>
<button type="button" onclick="selectTab(this);">Exfoliators</button>
<button type="button" onclick="selectTab(this);">Moisturizers</button>
</div>

function selectTab(activeTab){
var siblings = activeTab.parentNode.childNodes;
for (s in siblings){
s.style.color='black';
}
activeTab.style.color='red';

我在正确访问 sibling 时遇到问题。按钮比这三个多，所以我需要动态解决这个问题。我将使用 Ajax，因此不会重新加载此页面。

Answer 1

您正在尝试做额外的工作...为什么不保留对当前选定选项卡的引用，然后在进行新选择时重置其样式。

此外，为此使用 CSS 类比内联样式要好得多(这样，您就无需费心使用 Javascript 来更改选项卡的外观):

<style>
  .tab { color: black; }
  .tab-selected { color: red; }
</style>
<div class="tab" onclick="selectTab(this)">Tab 1</div>
<div class="tab" onclick="selectTab(this)">Tab 2</div>
<!-- More tabs -->

<script>
   var selectedTab = null;
   function selectTab(tab) {
     if (selectedTab) { selectedTab.className = 'tab'; }
     tab.className = 'tab-selected';
     selectedTab = tab;
   }
</script>