jQuery UI Tabs Example

A simple example showing how to use jQuery UI's tabs

by yeyene

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="aracislem" class="panel-collapse collapse">
    <div class="panel-body">
        <ul>
            <li><a href="http://localhost/pages/aracislemler#aracaramatab">Araç Arama </a>

            </li>
            <li><a href="http://localhost/pages/aracislemler#arackayittab">Araç Kayıt </a>

            </li>
            <li><a href="http://localhost/pages/aracislemler#istatistiktab">İstatistik </a>

            </li>
            <li><a href="http://localhost/pages/aracislemler#aractakiptab">Araç Takibi </a>

            </li>
        </ul>
    </div>
</div>
<br />
<div id="tab-container" class='tab-container'>
    <ul>
        <li class='tab'><a href="#aracaramatab">Araç Arama</a>

        </li>
        <li class='tab'><a href="#arackayittab">Araç Kayıt</a>

        </li>
        <li class='tab'><a href="#istatistiktab">İstatistik</a>

        </li>
        <li class='tab'><a href="#aractakiptab">Araç Takip</a>

        </li>
    </ul>
    <div class='panel-container'>
        <div id="aracaramatab">Araç Arama</div>
        <div id="arackayittab">Araç Kayıt</div>
        <div id="istatistiktab">İstatistik</div>
        <div id="aractakiptab">Araç Takip</div>
    </div>
</div>
<br />
<div id="tabid"></div>

CSS

body {
    background-color: #eef;
}
#tab-container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */

JavaScript

$(document).ready(function () {
    $("#tab-container").tabs({});
    
    // for testing purpose
    var url = "http://localhost/pages/aracislemler#arackayittab";
    
    // use this script for getting url
    //var url = window.location.href;
    var hash = url.substring(url.indexOf('#'));

    // trigger click to tab with url hash name
    $('#tab-container a[href='+hash+']').trigger('click');
});