Crear una navegación por pestañas con AJAX y CSS. Segunda Parte

Comentarios 3 COMENTARIOS
Tags 07/11/2006 -  Tags , ,

Continuación del tutorial de ayer. En esta parte vamos a ver la parte AJAX del mismo. Lo primero es crear una nueva istancia del objeto XMLHttpRequest:

var peticion = false; 
if (window.XMLHttpRequest) {
peticion = new XMLHttpRequest();
} else if (window.ActiveXObject) {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}

Luego necesitamos una función que cargue los datos en el div que le indiquemos.

function ObtenerDatos(datos,divID) { 
if(peticion) {
     var obj = document.getElementById(divID); 
     peticion.open("GET", datos); 
     peticion.onreadystatechange = function()  { 
          if (peticion.readyState == 4) { 
               obj.innerHTML = peticion.responseText; 
          } 
     } 
peticion.send(null); 
}
}

A la función la llamamos desde cada una de las pestañas para que cargue el contenido correspondiente. Le pasamos dos parámetros, los datos que queremos abrir y dónde los queremos abrir. Esta es una función genérica que nos puede servir en muchos casos para cargar datos con AJAX.Así la lista, variaría respecto a como nos quedamos en el tutorial anterior y quedaría del siguiente modo:

<li class="activo" id="bt1"><a href="javascript:ObtenerDatos('1.html','ContTabul');CambiarEstilo('bt1');">Apartado 1</a></li>
<li class="inactivo" id="bt2"><a href="javascript:ObtenerDatos('2.html','ContTabul');CambiarEstilo('bt2');">Apartado 2</a></li>
<li class="inactivo" id="bt3"><a href="javascript:ObtenerDatos('3.html','ContTabul');CambiarEstilo('bt3');">Apartado 3</a></li>
<li class="inactivo" id="bt4"><a href="javascript:ObtenerDatos('4.html','ContTabul');CambiarEstilo('bt4');">Apartado 4</a></li>

En este punto, la navegación ya funciona. Pero si os fijais en el código precedente, vereis que le he asignado un id a cada botón (bt1,b2,bt3,bt4) y a al primero una clase "activo" y al resto "inactivo"

#tabnav .activo {
      border-bottom: 1px solid #fff;
      color: #000000;
      background-color: #FFFFFF;
}
#tabnav .inactivo {}

Esto lo hago para, de un modo similar a un ejemplo anterior, cambiar la clase de los elementos y así siempre marcar el apartado activo. En este caso me apoyo también en una función creada por Jonathan Snook para obtener el elementos que tenga la clase "activo" y pasarlo a "inactivo".

function CambiarEstilo(id) {
var elementosMenu = getElementsByClassName(document, "li", "activo");
for (k = 0; k< elementosMenu.length; k++) {
elementosMenu[k].className = "inactivo";
}
var identity=document.getElementById(id);
identity.className="activo";
}
/*
function getElementsByClassName
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

Descargar ejemplo completo »»

Algunas entradas relacionadas:

También te puede interesar:

Comentarios
1 alexandra

hola!!

bueno me parece muy interesante el codigo y gracas por ponerlo ya lo pude usar;

tengo aun asi una duda, este codigo no es utilizable para Internet Explorer verdad? bueno soy novata en ajax y en todo en general pero creo que ajax no funciona en IE en la version 7 al menos; hay alguna manera de que se vea en IE;

y otra duda, si quiero hacer un vinculo interno, como puedo hacer que se vea en la misma pestaña aun cuando sean dos paginas html diferentes (una que me llegue a la otra).


agradeceria mucho la ayuda. gracias!!!!
2 diseño web
http://www.trazavirtual.com

Me parece bueno el material aunque solo observaria que al cambiar la pestaña se ve muy rapido, quizas con un \"cargando\" la cosa cmabie. Gracias por la info!
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com