我想改變所有兄弟元素的風格

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>