How to create tabs with JavaScript and HTML

If you want to create tabs on your website, it is good idea and you should do it! But how to create tabs? Good question!

To create tabs you will use HTML elements and some code of JavaScript. Hereafter will show up HTML code.

<!-- tabs -->
<ul class="tabs">
<li><a href="#">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
</ul>

<!-- panes -->
<div class="panes">
<div>Pane One</div>
<div>Pane Two</div>
</div>

Next you need JavaScript code to bind tabs to panes and enable the tabbing effect. Here is JavaScript code you need to.

$(function(){
$("ul.tabs").tabs("div.panes > panes ");
});

After HTML code and JavaScript Code, you can use your imagination to coding CSS. I like this snippet because it is minimal, easy and fast to see results.