Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/08/2009, 09:17
Avatar de junihh
junihh
 
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 20 años, 9 meses
Puntos: 7
Problemas con javascript para mostrar pestañas en IE

Hola señores

Hace unas cuantas semanas escribi un JS para mostrar contenido a traves de pestañas. El mismo funcionaba muy bien en todos los navegadores menos en ninguna de las versiones de Internet Explorer.

Acabo de reformular ese JS y aun continua con el mismo problema. Lo curioso (que tambien me molesta) es que en Firefox, Safari, Opera y Chrome funciona muy bien, pero no pasa lo mismo con ninguna de las versiones de Internet Explorer (6-7-8). Es ridiculo que un JS-CSS que funciona bien en todos los navegadores que cumplen los estandares de W3C, no funcione en Explorer (que no cumple con los estandares).

Este es un ejemplo funcional de mi JS y mas abajo el codigo, a ver si pueden hecharle un ojo y decirme que debo cambiar o que estoy haciendo mal para que funcione con Explorer:

Código:
function setTabs(id)
{
        var clsNor = 'normal';
        var clsCur = 'curr';
        //
        var tbs = document.getElementById(id).getElementsByTagName('ul')[0];
        var tbsLi = tbs.getElementsByTagName('li');
        //
        var bxs = document.getElementById(id).getElementsByTagName('ul')[1];
        var bxsLi = bxs.getElementsByTagName('li');
        //
        for (var i = 0; i < tbsLi.length; i++)
        {
            setObj(i);
        }
        //
        setCur(0);
        //
        function setObj(nu)
        {
            tbsLi[nu].onmouseover = function()
	    {
                this.style.cursor = 'pointer';
                this.style.cursor = 'hand';
	    }
            tbsLi[nu].onmouseout = function()
            {
                this.style.cursor = 'default';
	    }
            tbsLi[nu].onclick = function()
	    {
                setCur(nu);
            }
        }
        //
        function setCur(nu)
        {
            for (var u = 0; u < tbsLi.length; u++)
            {
                tbsLi[u].className = clsNor;
                bxsLi[u].style.display = 'none';
            }
            //
            tbsLi[nu].className = clsCur;
            bxsLi[nu].style.display = 'block';
        }
}

Este el CSS de las pestañas:

Código:
<style type="text/css">
<!--
    
        ul {
            font-family: Arial, Helvetica, sans-serif;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        
        .tbTi li, .tbTi li.normal {
            float: left;
            margin-right: -1px;
            margin-bottom: 1px;
            font-size: 11px;
            color: #666;
            border: solid 1px #666;
            padding: 3px 8px;
            text-decoration: none;
            background-color: #FFF;
            margin-bottom: -1px;
        }
        .tbTi li:hover, .tbTi li.curr {
            color: #FFF;
            text-decoration: none;
            background-color: #666;
        }
        
        .tbBx li {
            font-size: 12px;
            color: #000;
            border: solid 1px #666;
            padding: 8px;
            width: 180px;
            margin-bottom: -1px;
        }
        
        .clear {
            clear: both;
        }
        
-->
</style>
Muchisimas gracias de anticipado a cualquier ayuda que me puedan prestar.
__________________
JuniHH
- Mi blog
- Mi portafolio

Última edición por junihh; 08/08/2009 a las 10:18