Tabs in SharePoint 2010 Using Jquery

First Create Simple aspx page in Sharepoint Designer. Add two placeholder First one additional page head Its holding any css and jQuery Scripts. Second one "> Place the Css and jQuery Script in additional Head Here is Script and Css :
Note: you have to give​ jquery.js file reference in head

<script type="text/javascript" src="/Style Library/js/jquery.js"></script>

Tab Structure :

<ul class="div-nav">

<li class="choice show-hs activated">High School</li>

<li class="choice show-ms">Middle School</li>

<li class="choice show-es">Elementary School</li>

</ul>

Hide and Show Div Structure :

<div class="content">

<div class="calendar">

<div class="webpart hs"></div>

​<div class="webpart ms"></div>

​​​<div class="webpart es"></div>

</div></div>

Additional Script :

For Hide All Divs.

    $("#daily-wrapper .webpart").hide();

Show First Div when loading page.

   $("#daily-wrapper .hs").fadeIn('slow');

Tab Selected Class.

   $("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});

Remove Class when other one select.

   $("ul.div-nav li.choice").click(function(){$(this).siblings('ul.div-nav li').removeClass('activated')});

Here is the Full Code
you have to add Style & script in additional Head :

<style type="text/css">

#daily-wrapper{ border:solid 4px#999;width:500px;}

#daily-wrapper ul.div-nav li {font-size:1.2em;margin:0px;border-right:1px solid #fff;}

#daily-wrapper .calendar {position:relative;border:0px solid #333;float:left;}

#daily-wrapper .calendar {margin-right:19px;}

#daily-wrapper .content .calendar h2 {color:#000;margin-bottom:20px;}

ul.div-nav {width:100%;background:#999;float:left;text-align:center;padding:0px;margin:0px;}

ul.div-nav li {display:block;float:left;color:#fff;text-decoration:none;padding:10px;}

ul.div-nav li:hover {background:#b80000;cursor:pointer;}

ul.div-nav li.activated {background:#b80000;}

</style>

<script type="text/javascript">

$("ul.div-nav").ready(function(){

 $("#daily-wrapper .webpart").hide();

 $("#daily-wrapper .hs").fadeIn('slow');

 $("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});

 $("ul.div-nav li.choice").click(function(){$(this).siblings('ul.div-nav li').removeClass('activated')});

 $("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});

 $("ul.div-nav li.show-hs").click(function(){$("#daily-wrapper .webpart.hs").fadeIn('slow')});

 $("ul.div-nav li.show-ms").click(function(){$("#daily-wrapper .webpart.ms").fadeIn('slow')});

 $("ul.div-nav li.show-es").click(function(){$("#daily-wrapper .webpart.es").fadeIn('slow')});

}); 

</script>

Structure :

<div id="daily-wrapper">

<ul class="div-nav">

<li class="choice show-hs activated">High School</li>

<li class="choice show-ms">Middle School</li>

<li class="choice show-es">Elementary School</li>

</ul>

<div class="content">

<div class="calendar">

<div class="webpart hs">

<h2>div first</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

<div class="webpart ms">

<h2>div Secoond</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

<div class="webpart es"><h2>div Third</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

</div>

</div>

</div>

If you have any questions you can reach out our SharePoint Consulting team here.