title: How to show the content by tab selection using jQuery?
body: <p>I want to select the content by selecting the appropriate tab like in this image </p>
  
  <p><img src="https://i.stack.imgur.com/EOc2O.jpg" alt="enter image description here">  </p>
  
  <p>In this image there are several tabs named ABOUT, MACHINES, etc. and below this all the contents are layered one upon another. Only the active tab is shown and others are hidden.
  I have two problems:</p>
  
  <p>1.whenever I click on a tab,then the selected tab's background color changes.</p>
  
  <p>to perform this task I did this.</p>
  
  <pre><code>$(document).ready(function(){
      $('#profiletabs a').click(function() {
          $('#profiletabs a.activetab').removeClass('activetab');
          $(this).addClass('activetab');
      });
  });
  </code></pre>
  
  <p>2.whenever I select a tab then the corresponding content tab is to be shown </p>
  
  <p>Please tell me how to do this?</p>
  
  <p><strong>MENUBAR</strong></p>
  
  <pre><code>&lt;div id="profiletabs"&gt;
     &lt;ul&gt;
          &lt;li &gt;&lt;a href="#" class="activetab" onclick="showtab(1)"&gt;About&lt;/a&gt;      &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(2)"&gt;Machines&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(3)"&gt;users&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(4)"&gt;Marketing&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(5)"&gt;Charges&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(6)"&gt;Discounts&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(7)"&gt;Timings&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(8)"&gt;Programs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(9)"&gt;Facilities&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(10)"&gt;Special Programs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(11)"&gt;Staff&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onclick="showtab(12)"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>CONTENT</strong></p>
  
  <pre><code>  &lt;div class="content active" style="display: block" id="tab1"&gt;
            &lt;div class="heading"&gt;About&lt;/div&gt;
               &lt;table class="contenttable"&gt;
  
             &lt;tr&gt;&lt;td class="lefttd"&gt;Address:&lt;/td&gt;&lt;td class="righttd"&gt;CMC mkt. , Near union bank of India , Main dadari road, Noida Sector-49&lt;/td&gt;&lt;/tr&gt;
  
             &lt;tr&gt;&lt;td class="lefttd"&gt;Location:&lt;/td&gt;&lt;td class="righttd"&gt;Noida.&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td class="lefttd"&gt;Landmark:&lt;/td&gt;&lt;td class="righttd"&gt;Near Golfview Hotel.&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td class="lefttd"&gt;Area:&lt;/td&gt;&lt;td class="righttd"&gt;200 Sq Fit.&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td class="lefttd"&gt;Speciality/UPS:&lt;/td&gt;&lt;td class="righttd"&gt;Group Ex.&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td class="lefttd"&gt;Branches in India:&lt;/td&gt;&lt;td class="righttd"&gt;6.&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td class="lefttd"&gt;Surrounding:&lt;/td&gt;&lt;td class="righttd"&gt;Abc.&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td class="lefttd"&gt;History:&lt;/td&gt;&lt;td class="righttd"&gt;Since 2001&lt;/td&gt;&lt;/tr&gt;
               &lt;/table&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>and so on for other contents....
  To show the content I did this</p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function (){
      var curnt=1;
      function showtab(next)
      {
          $(".rightcontainer #tab"+curnt).removeClass("active");
          $(".rightcontainer #tab"+next).addClass("active");
          curnt=next;
      }
  });
  </code></pre>
  
  <p>Thank you.</p>