HOW TO CREATE A PAGE MARKUP WITH CSS3 AND JQUERY

<style type="text/css">
<!--
body{
}
.menubar{
 height: 25px;
 width: 450px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 background-color: #F9F9F9;
 padding: 5px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-left-style: solid;
 border-top-color: #CCCCCC;
 border-right-color: #CCCCCC;
 border-left-color: #CCCCCC;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #CCCCCC;
 overflow: visible;
}
.button{
 border: 1px solid #CCCCCC;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 display: inline-block;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
 margin-right: 5px;
 text-align: center;
 width: 65px;
 background-color: #E5E5E5;
 text-decoration: none;
 height: 17px;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 6px;
 padding-left: 5px;
}
.selbutton{
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 display: inline-block;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
 margin-right: 5px;
 text-align: center;
 width: 65px;
 background-color: #FFFFFF;
 text-decoration: none;
 height: 18px;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 6px;
 padding-left: 5px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-left-style: solid;
 border-top-color: #CCCCCC;
 border-right-color: #CCCCCC;
 border-left-color: #CCCCCC;
 overflow: visible;
 visibility: visible;
}

.content{
 height: 27px;
 width: 450px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 background-color: #FfFfFf;
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #CCCCCC;
 border-bottom-color: #CCCCCC;
 border-left-color: #CCCCCC;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#Tab2').css('display', 'none');//hide tab2 div
 $('#Tab3').css('display', 'none');//hide tab3 div
});

function tab1(){//once tab1 clicked on
 $('a').removeClass("selbutton");//remove .selbutton class from all linkes
 $('a').addClass("button");//add .button class to all linkes
 $('#b1').removeClass("button");//remove .button
 $('#b1').addClass("selbutton");//add .selbutton (this button will selected)
 $('#Tab2').css('display', 'none');//hide tab 2
 $('#Tab3').css('display', 'none');//hide tab 3
 $('#Tab1').css('display', 'inline-block');//show tab 1
 }
 function tab2(){//once tab2 clicked on
 $('a').removeClass("selbutton");//remove .selbutton class from all linkes
 $('a').addClass("button");//add .button class to all linkes
 $('#b2').removeClass("button");//remove .button
 $('#b2').addClass("selbutton");//add .selbutton (this button will selected)
 $('#Tab1').css('display', 'none');//hide tab 1
 $('#Tab3').css('display', 'none');//hide tab 3
 $('#Tab2').css('display', 'inline-block');//show tab 2
 }
 function tab3(){//once tab3 clicked on
 $('a').removeClass("selbutton");//remove .selbutton class from all linkes
 $('a').addClass("button");//add .button class to all linkes
 $('#b3').removeClass("button");//remove .button
 $('#b3').addClass("selbutton");//add .selbutton (this button will selected)
 $('#Tab1').css('display', 'none');//hide tab 1
 $('#Tab2').css('display', 'none');//hide tab 2
 $('#Tab3').css('display', 'inline-block');//show tab 2
 }
</script>

<div class="menubar"><a id="b1" href="#" class="selbutton" onclick="return false" onmousedown="javascript:tab1();">Tab1</a><a id="b2" href="#" class="button" onclick="return false" onmousedown="javascript:tab2();">Tab2</a><a id="b3" href="#" class="button" onclick="return false" onmousedown="javascript:tab3();">Tab3</a></div>
<div class="content"><div id="Tab1">tab1 is shown tabs 2 & 3 are hidden</div><div id="Tab2">tab2 is shown tabs 1 & 3 are hidden</div><div id="Tab3">tab3 is shown tabs 2 & 1 are hidden</div></div>