Código:

[/b][b]<div id="pun-info" class="main">
    <div class="main-content">
        <div id="stats">
            <p class="right">{TOTAL_POSTS}</p>
            <p>{TOTAL_USERS}</p>
            <p>{NEWEST_USER}</p>
        </div>
        <div id="onlinelist">
            <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
            <p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
            <p>{TOTAL_USERS_ONLINE}<br />
            {RECORD_USERS}
           
            <br />
            {LOGGED_IN_USER_LIST}
           
            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <div class="clear"></div>
           
            <p>{LEGEND} : {GROUP_LEGEND}</p>
           
        </div>
        <!-- BEGIN switch_chatbox_activate -->
        <div id="onlinechat">
            <p class="page-bottom">
            {TOTAL_CHATTERS_ONLINE} : 
            {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                </script>
            <!-- END switch_chatbox_popup -->
            </p>
        </div>
        <!-- END switch_chatbox_activate -->
    </div>
</div>[/b][b]

Código:


 
<div id="pun-info" class="main">
    <div class="main-content-stats">
<div class="simple-tabs">
  <ul class="simpletabs">
    <li><a href="#onlinelist">Usuarios en línea</a></li>
    <li><a href="#stats">Estadisticas</a></li>
    <li><a href="#onlinechat">ChatBox</a></li>
<!-- aqui se pueden agregar mas pestañas con el formato: <li><a href="#miID">Mi pestaña</a></li>, pero tambien deben agregarse un div en el tab_container: <div id="miID">contenido</div>  -->
  </ul>
<div class="tab_container">
        <div id="onlinelist" class="divwhite">
            <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" title="¿Quién está en línea?" />
            <p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
            <p>{TOTAL_USERS_ONLINE}
            <br />
            {LOGGED_IN_USER_LIST}
           
            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <div class="clear"></div>
           
            <p>{LEGEND} : {GROUP_LEGEND}</p>
           
        </div>
 
 
        <div id="stats" class="divwhite">
            <p>{RECORD_USERS}</p>
            <p>{TOTAL_POSTS}</p>
            <p>{TOTAL_USERS}</p>
            <p>{NEWEST_USER}</p>                 
        </div>
 
 
        <div id="onlinechat" class="divwhite">
        <!-- BEGIN switch_chatbox_activate -->
            <p class="page-bottom">
            {TOTAL_CHATTERS_ONLINE} :&nbsp;
            {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                </script>
            <!-- END switch_chatbox_popup -->
            {CHATBOX_BOTTOM}
            </p>
        <!-- END switch_chatbox_activate -->
        </div>
</div <!-- fin tab_container -->
</div><!-- fin SimpleTabs -->
        </div>
</div>



Código:


/**************************************************
* Codigo perteneciente a SOH de [url=http://www.sohtanaka.com]http://www.sohtanaka.com[/url]           
* [url=http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/]http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/[/url]
***************************************************/
$(function() {
    //Al cargar la pagina...
    $("div.divwhite").hide(); //Oculta todo el contenido
    $("ul.simpletabs li:first").addClass("active").show(); //Activa la primera pestaña
    $("div.divwhite:first").show(); //Muestra el contenido de la primera pestaña
 
    //Al hacer click
    $("ul.simpletabs li").click(function() {
 
        $("ul.simpletabs li").removeClass("active"); //Remueve la clase "active" de los elementos de la lista.
        $(this).addClass("active"); //Agrega la clase "active" a los elementos de la lista
        $("div.divwhite").hide(); //Oculta todo el contenido
 
        var activeTab = $(this).find("a").attr("href"); //Busca el atributo "href" para identificar la pestaña activa mas el contenido
        $(activeTab).fadeIn(); //Efecto de aparición al contenido de la pestaña activa.
        return false;
    });
});
 


/**************************************
*Estadisticas en Pestañas
*Tutorial y CSS creado por BlAcKDoZzEr666
**************************************/
div#onlinelist img {padding-right:5px;}
div#onlinelist, div#onlinechat {border-style: none;}
.pun .main .main-content-stats {background-color: transparent;}

div.simple-tabs{
width:100%;
}
div.tab_container{
border: 1px solid #12A3EB;
padding: 5px;
background-color: #E6F4FF;
font-size:12px;
-moz-border-radius-bottomleft : 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
min-height:150px;
}
ul.simpletabs{
list-style-type: none;
margin: 0;
padding-left: 30px;
padding-bottom: 25px;
font: 11px verdana, arial, sans-serif;
}
ul.simpletabs li{
float: left;
height: 21px;
background-color: #E4E4E4;
color: #666;
margin: 2px 5px 0 2px;
border: 1px solid #7ccafc;
}
ul.simpletabs li, ul.simpletabs li a{
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topright:6px;
-webkit-border-top-right-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
ul.simpletabs li a{
border-bottom:1px solid #12A3EB;
}
ul.simpletabs li:hover {
background:#E6F4FF;
color:#12A3EB;
border:1px solid #12A3EB;
}
ul.simpletabs li.active {
border:1px solid #12A3EB;
}
ul.simpletabs li.active a {
background:#E6F4FF;
color:#12A3EB;
border-bottom:1px solid #E6F4FF;
}
ul.simpletabs li a:hover {
background:#E6F4FF;
color:#12A3EB;
}
ul.simpletabs a:link,
ul.simpletabs a:visited,
ul.simpletabs a:active {
width:auto;
padding:4px 5px 4px 5px;
height:14px;
display:block;
font-weight:bold;
text-decoration:none;
text-align:center;
color: #000;
background-color: #fff;
}

/**************************************************
* Codigo original por SOH de http://www.sohtanaka.com
* http://www.sohtanaka.com/web-design/sim ... ss-jquery/
***************************************************/
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}