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>

友情链接