Я хочу изменить стиль всех родственных элементов

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>