Ver Mensaje Individual
  #4 (permalink)  
Antiguo 23/05/2009, 19:18
Avatar de junihh
junihh
 
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 20 años, 11 meses
Puntos: 7
Respuesta: Contenido por pestañas

Problema solucionado

Antes tenia lo siguiente:

Código PHP:
document.getElementById(arBxs[i]).style.visibility 'hidden';
--------
document.getElementById(arBxs[i]).style.visibility 'visible'
segun el caso. Eso lo cambie por

Código PHP:
document.getElementById(arBxs[i]).style.display 'none';
--------
document.getElementById(arBxs[i]).style.display 'block'

Para quien le pueda interesar, aqui les dejo la funcion completa:

Código PHP:
<script type="application/x-javascript">
    
        function 
setTabbing (tbsbxsini)
        {
            var 
arTbs = new Array();
            var 
arBxs = new Array();
            var 
arCnt tbs.split('-').length;
            
//
            
for (var i=0arCnti++)
            {
                
arTbs[i] = tbs.split('-')[i];
                
arBxs[i] = bxs.split('-')[i];
                
document.getElementById(arBxs[i]).style.display 'none';
                
//
                
bot (arTbs[i],arBxs[i]);
            }
            
//
            
function bot (tb,bx)
            {
                
document.getElementById(tb).onclick = function()
                { 
                    for (var 
i=0arCnti++)
                    {
                        
document.getElementById(arTbs[i]).className 'normal';
                        
document.getElementById(arBxs[i]).style.display 'none';
                    }
                    
document.getElementById(tb).className 'active';
                    
document.getElementById(bx).style.display 'block';
                }
            }
            
//
            
document.getElementById(arTbs[ini-1]).className 'active';
            
document.getElementById(arBxs[ini-1]).style.display 'block';
        }
        
</script> 
Se aplica de la siguiente forma:

Código PHP:
<div>
        
        <
ul class="nav">
            <
li><a id="t21" href="#">Tab 01</a></li>
            <
li><a id="t22" href="#">Tab 02</a></li>
            <
li><a id="t23" href="#">Tab 03</a></li>
        </
ul>
        
        <
div style="clear:both;"></div>
        
        <
div class="boxes" id="b21">Contenido en el box1 con suficiente texto para una buena lecturaaunque este tiene mas contenido que los demas.</div>
        <
div class="boxes" id="b22">Contenido en el box2 con texto.</div>
        <
div class="boxes" id="b23">Contenido en el box3 con un poco mas de texto.</div>
        
    </
div>
    
    
    <
script type="application/x-javascript">
        
setTabbing ('t11-t12-t13''b11-b12-b13''1');
        
setTabbing ('t21-t22-t23''b21-b22-b23''1');
    
</script> 
Tiene la salvedad que deben crear una clase llamada "normal" que el JS aplica a la pestaña para mostrar esta como inactiva y otra clase llamada "active" para mostrarla activa.

Esta es la primera funcion en JS importante hecha por mi, por lo que tiene cierto "valor sentimental". Espero les sirva.
__________________
JuniHH
- Mi blog
- Mi portafolio

Última edición por junihh; 23/05/2009 a las 19:24