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';

我无法正确访问兄弟姐妹。有比这三个更多的按钮所以我需要动态地解决这个问题。我将使用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>

我想改变所有兄弟元素的风格

1 个答案: