jQuery UI Tabs Example

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

by lawrence pond

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="AlertMessage" class="errorMessage" >
Alert Will Rogers
    
</div>

<div id="MessageTabs" runat="server">

    
    <div id="MessageTaber">
        <ul>
            <li  class="tab-active"><a href="#tabInbox" rel="nofollow">Inbox</a></li>
            <li><a href="#tabOutbox">Outbox</a></li>
            <li id="xxtabAdmin" runat="server"><a href="#tabAddbox">Admin</a></li>
        </ul>

        <div id="tabInbox" class="tabs-stage" >
            Inbox
                      
        </div>

      
        <div id="tabOutbox">
             Outbox
        </div>
         
        <div id="tabAddbox" class="tabaddbox" runat="server">
           Adminbox
        </div>
      
    </div>
  <div id="tabid"></div>

CSS

body {
    background-color: #eef;
}

 .errorMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #cc0000;
        padding: 8px;
        background-color: #fefeee;
        color: #cc0000;
        font-weight: bold;
        margin-bottom: 15px;
    }

   .successMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #000000;
        padding: 8px;
        background-color: #fefeee;
        color: green;
        font-weight: bold;
        margin-bottom: 15px;
    }

#tabs {
    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

$(function () {
     alert("You are here");
     $("#MessageTaber").tabs({
    activate: function (event, ui) {
        var active = $('#MessageTaber').tabs('option', 'active');
        $("#AlertMessage").hide(500);
        $("#tabid").html('the tab id is ' + $("#MessageTaber ul>li a").eq(active).attr("href"));
    }
}

);
     
     $("#MessageTaber").tabs();
        //$("#MessageTabs").tabs("option","active");
    });