JQuery UI Tabs example

by Manoj kumar Lakshman

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css">
<div id="tabs">
    <ul>
        <li id="1"><a href="#tabs-1">Nunc tincidunt</a>
        </li>
        <li id="3"><a href="#tab3">Aenean lacinia</a>
        </li>
        <li id="2"><a href="#tabs-2">Proin dolor</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>1.</p>
    </div>
    <div id="tabs-2">
        <p>2.</p>
    </div>
    <div id="tab3">
        <p>3.</p>
    </div>
</div>

JavaScript

$(function () {
    //sort the tabs 
    sortTabs('#tabs');
    alert($('#tabs').html());
    var tabs = $("#tabs").tabs();

    function sortTabs(target) {
        var sortedTabs = $(target).find("li").sort(function (a, b) {
            if (a.id < b.id) {
                return -1;
            } else {
                return 1;
            }
        });
        //update the sorted DOM
        $(target).find('ul').html(sortedTabs);
    }
});