javascript - How to show the content by tab selection using jQuery? -

i want select content selecting appropriate tab in image

in image there several tabs named about, machines, etc. , below contents layered 1 upon another. active tab shown , others hidden. have 2 problems:

1.whenever click on tab,then selected tab's background color changes.

to perform task did this.

$(document).ready(function(){     $('#profiletabs a').click(function() {         $('#profiletabs a.activetab').removeclass('activetab');         $(this).addclass('activetab');     }); }); 

2.whenever select tab corresponding content tab shown

please tell me how this?

menubar

<div id="profiletabs">    <ul>         <li ><a href="#" class="activetab" onclick="showtab(1)">about</a>      </li>         <li><a href="#" onclick="showtab(2)">machines</a></li>         <li><a href="#" onclick="showtab(3)">users</a></li>         <li><a href="#" onclick="showtab(4)">marketing</a></li>         <li><a href="#" onclick="showtab(5)">charges</a></li>         <li><a href="#" onclick="showtab(6)">discounts</a></li>         <li><a href="#" onclick="showtab(7)">timings</a></li>         <li><a href="#" onclick="showtab(8)">programs</a></li>         <li><a href="#" onclick="showtab(9)">facilities</a></li>         <li><a href="#" onclick="showtab(10)">special programs</a></li>         <li><a href="#" onclick="showtab(11)">staff</a></li>         <li><a href="#" onclick="showtab(12)">contact</a></li>      </ul> </div>  

content

  <div class="content active" style="display: block" id="tab1">           <div class="heading">about</div>              <table class="contenttable">             <tr><td class="lefttd">address:</td><td class="righttd">cmc mkt. , near union bank of india , main dadari road, noida sector-49</td></tr>             <tr><td class="lefttd">location:</td><td class="righttd">noida.</td></tr>            <tr><td class="lefttd">landmark:</td><td class="righttd">near golfview hotel.</td></tr>            <tr><td class="lefttd">area:</td><td class="righttd">200 sq fit.</td></tr>            <tr><td class="lefttd">speciality/ups:</td><td class="righttd">group ex.</td></tr>            <tr><td class="lefttd">branches in india:</td><td class="righttd">6.</td></tr>            <tr><td class="lefttd">surrounding:</td><td class="righttd">abc.</td></tr>            <tr><td class="lefttd">history:</td><td class="righttd">since 2001</td></tr>              </table>           </div> 

and on other contents.... show content did this

jquery

$(document).ready(function (){     var curnt=1;     function showtab(next)     {         $(".rightcontainer #tab"+curnt).removeclass("active");         $(".rightcontainer #tab"+next).addclass("active");         curnt=next;     } }); 

thank you.

i suggest setting data value links tab content div. can inspect data value , find content div show:

$('#tabs li').click(function() {     $('#tabs .active').removeclass('active');     var tab = $(this).addclass('active').data('tab-content');     $('.tab-content.active').removeclass('active');     $('.tab-content[data-tab-content='+tab+']').addclass('active'); });   <ul id="tabs">     <li data-tab-content="tab1">tab 1</li>     <li data-tab-content="tab2">tab 2</li> </ul>  <div class="tab-content" data-tab-content="tab1">my tab 1 content</div> <div class="tab-content" data-tab-content="tab2">tab2 content div</div> 

http://jsfiddle.net/yevzr/