Using JavaScript to switch through tabs without changing layout?
<p>My webpage is at <a href="http://sarahjanetrading.com/js/j/index.html" rel="nofollow">http://sarahjanetrading.com/js/j/index.html</a></p>

<p>I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now,  And I want the layout to remain the same.</p>

<p>NEW :</p>

<p>This is my code so far: </p>

<pre><code>&lt;script type="text/javascript"&gt;
var lis = $('#main-tabs li');
  lis.click( function() {
  //Reset all the tabs
  lis.removeClass('active-tab').addClass('inactive-tab');
  $(this).addClass('active-tab');
   });

 &lt;/script&gt; 

&lt;script type="text/javascript"&gt;
$(document).ready(function() {

 $(".tab-content").hide();
 $("ul#main-tabs li a:first").addClass("active").show();
 $("#wrap &gt; div").hide().filter(":first").show();

 $("ul.tabs li a").click(function() {
    $("ul.tabs li &gt; a").removeClass("active");
    $(this).addClass("active");
    $("#wrap &gt; div").hide();
    var activeTab = $(this).attr("href");
    $(activeTab).show();
    return false;
  });

});

&lt;/script&gt;
</code></pre>

<p>For the full HTML and JavaSript code (new) please go to  <a href="http://sarahjanetrading.com/js/j/index.html" rel="nofollow">http://sarahjanetrading.com/js/j/index.html</a></p>

<p>What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently. </p>

<p>Thanks</p>
