title: I want to load the first tab of my tabbed shopping cart
body: <p>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.
  <a href="http://www.droodslist.com/admin/theresheglowsshoppingcart/Feb14/skin-care-products.htm" rel="nofollow">My Shopping Cart</a></p>
  
  <pre><code>&lt;div class="tabs"&gt;
  &lt;button type="button" class="tab" onclick="selectTab(this);"&gt;Cleansers&lt;/button&gt;
  &lt;button type="button" class="tab" onclick="selectTab(this);"&gt;Toners&lt;/button&gt;
  &lt;button type="button" class="tab" onclick="selectTab(this);"&gt;Astringents&lt;/button&gt;
  &lt;button type="button" class="tab" onclick="selectTab(this);"&gt;Exfoliators&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var selectedTab = null;
  function selectTab(tab) {
   tab.blur();
   if (selectedTab) { selectedTab.className = 'tab'; }
   tab.className = 'tab-selected';
   selectedTab = tab;
   // call ajax to load products
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried setting the class property to tab-selected like this</p>
  
  <pre><code>&lt;button type="button" class="tab-selected" onclick="selectTab(this);"&gt;Cleansers&lt;/button&gt;
  </code></pre>
  
  <p>but it remains highlighted when I click the other tabs.</p>