0

I have a tabbed interface for changing categories in a shopping cart. The active tab is highlighted when clicked, and the previous tab goes back to normal. I want the first tab to be already selected when the user visits the page. My Shopping Cart

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

<script type="text/javascript">
var selectedTab = null;
function selectTab(tab) {
 tab.blur();
 if (selectedTab) { selectedTab.className = 'tab'; }
 tab.className = 'tab-selected';
 selectedTab = tab;
 // call ajax to load products
}
</script>

I tried setting the class property to tab-selected like this

<button type="button" class="tab-selected" onclick="selectTab(this);">Cleansers</button>

but it remains highlighted when I click the other tabs.

Corey
  • 257
  • 1
  • 4
  • 14

3 Answers3

1

You should take a look at jQuery UI Tabs. It is much easier and your javascript code would be more "manageable".

LeftyX
  • 35,328
  • 21
  • 132
  • 193
0

this might help

Change an element's class with JavaScript

I guess when you highlighting first tab on page load, variable "selectedTab" is still null

Community
  • 1
  • 1
hungryMind
  • 6,931
  • 4
  • 29
  • 45
0

This will work even if the tabs are changed. I used button elements for tabs, but it will work for any element when you need the first one.

<body onload="selectTab(document.getElementsByTagName('button')[0]);" >
Corey
  • 257
  • 1
  • 4
  • 14