Problemas con javascript para mostrar pestañas en IE

junihh · #1 (**permalink**) 08/08/2009, 09:17

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.

zerokilled · #2 (**permalink**) 08/08/2009, 11:33

en la direccion indicada no se muestra el ejemplo funcional, lo unico que la pagina carga es

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
    
    
    <title>Tabs 2</title>
    
    
    <style type="text/css">
    <!--

junihh · #3 (**permalink**) 08/08/2009, 12:09

Tienes razon @zerokilled, ahora si podras ver la muestra.

Adler · #4 (**permalink**) 08/08/2009, 12:49

Hola

El problema lo tienes aquí

<script type="application/x-javascript">

IE no lo soporta. Cambialo a

<script type="text/javascript">

Suerte

junihh · #5 (**permalink**) 08/08/2009, 14:00

Funciona perfecto @Adler, aunque ahora queda una curiosa distancia entre las pestañas y los cuadros del contenido. Muchisimas gracias por tu ayuda, ya vere como soluciono el nuevo problema.