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;}

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>
<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