Create j-query tabs

Create j-query tabs in easy way






css

a{ text-decoration:none;}
.ui-tabs{ border:1px solid #F09 !important;}


.ui-tabs .ui-tabs-nav{ background-color:#00F !important;}



Html


<div id="mytabs">

<ul>
<li><a href="#tab1">tab-1 </a></li>
<li><a href="#tab2">tab-2 </a></li>
<li><a href="#tab3">tab-3 </a></li>
<li><a href="#tab4">tab-4 </a></li>
<li><a href="#tab5">tab-5 </a></li>
<li><a href="#tab6">tab-6 </a></li>
<li><ahref="#tab7">tab-7 </a></li>

</ul>

<div id="tab1">
<p> Hello I am creating the fist time tab-1</p>
</div>

<div id="tab2">
<p> my second tab </p>
</div>


<div id="tab3">
<p> my 3rd tabs</p>
</div>

<div id="tab4">
<p> 4 tab created by me</p>
</div>

<div id="tab5">
<p> 5 tab created by me</p>
</div>

<div id="tab6">
<p> 6 wa tab</p>
</div>

<div id="tab7">
<p> 7th tabs crated</p>
</div>


</div>




js 

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#mytabs').tabs();
});
</script>



supporting file download for giving bottom links 

http://jqueryui.com/download/

go to bottom select blitzer mode and after that download the files




No comments:

Post a Comment