Jquery UI tab

I am trying to use the jquery UI tab example from Jquery UI. I used the themed tool which i downloaded the code.

Having used the html markup example and css i still cannot get the tabbing to display.

Can anyone give me a good example?

thanks

Re: Jquery UI tab

Here is a simple jquery tab functionality, Implemented, tested and working.

see in action here, http://jsfiddle.net/TJfYf/1/

in html,

<div id="tab-wrapper">
        <ul class="tabs">
            <li><a class="defaulttab active" rel="tabs1">Tab1</a></li>
            <li><a rel="tabs2">Tab2</a></li>
            <li><a rel="tabs3">Tab3</a></li>
        </ul> 
        <div class="tab-content" id="tabs1">Tab1</div>
        <div class="tab-content" id="tabs2">Tab2</div>
        <div class="tab-content" id="tabs3">Tab3</div>            
</div>

css,

ul.tabs li {display:block;float:left;position: relative;z-index: 0}
ul.tabs li a {padding:12px 10px;display:block;float:left;background-color:#fff;border: 1px solid silver;}
ul.tabs li a.active {background: #d2d2d2}
.tab-content {width: 300px;height: 200px;clear:both;border: 1px solid silver;position: relative;z-index: 1;background: #fff;}

javascript, dont forget to include jquery.js,

$(document).ready(function(){
    switch_tabs($('.defaulttab'));
    $('.tabs a').click(function() {
        switch_tabs($(this));
    });    
});
function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("active");
    var id = obj.attr("rel");

    $('#' + id).show();
    obj.addClass("active");
}

Re: Jquery UI tab

Here is the simple code, implemented,tested and working

also see in action here, http://jsfiddle.net/TJfYf/1/

in html,

<div id="tab-wrapper">
        <ul class="tabs">
            <li><a class="defaulttab active" rel="tabs1">Tab1</a></li>
            <li><a rel="tabs2">Tab2</a></li>
            <li><a rel="tabs3">Tab3</a></li>
        </ul>
        <div class="tab-content" id="tabs1">Tab1</div>
        <div class="tab-content" id="tabs2">Tab2</div>
        <div class="tab-content" id="tabs3">Tab3</div>
</div>

in css,

ul.tabs li {display:block;float:left;position: relative;z-index: 0}
ul.tabs li a {padding:12px 10px;display:block;float:left;background-color:#fff;border: 1px solid silver;}
ul.tabs li a.active {background: #d2d2d2}
.tab-content {width: 300px;height: 200px;clear:both;border: 1px solid silver;position: relative;z-index: 1;background: #fff;}

in javascript, (dont forget to include jquery.js)

$(document).ready(function(){
    switch_tabs($('.defaulttab'));
    $('.tabs a').click(function() {
        switch_tabs($(this));
    });    
});
function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("active");
    var id = obj.attr("rel");

    $('#' + id).show();
    obj.addClass("active");
}

Re: Jquery UI tab

Check if you have added all the necessary .js and .css files in page. Belwo link might help:

http://www.codegateway.com/2012/02/jquery-tabs-ui.html