Jquery UI tab : The Official Microsoft ASP.NET Forums

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

Pratik Galoria,
Software Engineer,
iGATE Global Solutions.

pratik_galoria@yahoo.co.in
+91-8905195943

Edited by pratik_galoria on Feb 29, 2012 08:14 AM
Edited by pratik_galoria on Feb 29, 2012 08:14 AM
Edited by pratik_galoria on Feb 29, 2012 08:15 AM
Edited by pratik_galoria on Feb 29, 2012 08:15 AM
Edited by pratik_galoria on Feb 29, 2012 08:15 AM
Marked as answer by BU XI - MSFT on Mar 06, 2012 02:34 AM

Reply

pratik_galor...

Participant

1483 Points

330 Posts

Re: Jquery UI tab

Feb 29, 2012 08:17 AM|LINK

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

Pratik Galoria,
Software Engineer,
iGATE Global Solutions.

pratik_galoria@yahoo.co.in
+91-8905195943