11034 Suscriptores al Feed del Blog
80 Suscriptores al Feed de Anotaciones Breves
22 usuarios online
Mauricio Campos en 50 preguntas y respuestas de entrevistas de trabajo
Crear una navegación por pestañas con AJAX y CSS. Segunda Parte
3 COMENTARIOS - Publicado hace 40 meses - Clasificado en: AJAX, TABS, TUTORIALContinuació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
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
Descargar ejemplo completo »»
Algunas entradas relacionadas:
También te puede interesar:
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 16 meses 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!!!! |
 |
Publicado hace 8 meses 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! |
