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 »»
