[elpana22]

alguien me podria explicar si el recueadro que esta en color azul donde tiene 4 solapas (fixtures, lives scores, results y video) de esta pagina

http://www.premierleague.com/page/Home/0,,12306,00.html#

esta hecho con css o algo mas sencillo??

saludos y gracias por la ayuda.

[estesua47]

Hola elpana22,

Las solapas estan hechas con 3 lenguajes, HTML, CSS y JavaScript.

Si ves el código fuente de la página se ve claramente como esta implementado. Paso a mostrarte:

Este es el código HTML de las solapas:

<div class="masterTabsWrapper"> 
<ul id="masterTabContainer4422"> 
<li class="masterTabSelected0" id="masterTabList4422_0"><a href='javascript:switchTab4422(0, true)'>FIXTURES</a></li> 
<li class="masterTab1" id="masterTabList4422_1"><a href='javascript:switchTab4422(1, true)'>LIVE SCORES</a></li> 
<li class="masterTab2" id="masterTabList4422_2"><a href='javascript:switchTab4422(2, true)'>RESULTS</a></li> 
<li class="masterTab3" id="masterTabList4422_3"><a href='javascript:switchTab4422(3, true)'>VIDEO</a></li> 
</ul>  
</div>  

A la derecha vas a poder ver los 4 títulos (fixture, live scores, results, video).

Donde dice class="masterTabSelected0" esta haciendo referencia a la clase CSS que le da el estilo, el aspecto de la solapa seleccionada (en este caso Fixture). El resto de las solapas tienen las clases masterTab1, masterTab2 y masterTab3 que son iguales (si bien son 3 clases diferentes, tiene la misma configuración).

Por último en la línea javascript:switchTab4422(3, true), se llama a la función javascript que activa la solapa en la que se hizo click y desactiva las otras (esta activación/desactivación, se hace cambiando la clase CSS de cada solapa, representada por el tag LI (ListItem) ).
La implementación de la función es la siguiente:

* No me puse a analizar en detalle la función, pero marqué las líneas de código en las que cambia las clases CSSs (recordá que "masterTabSelected0" es la clase de la solapa seleccionada y masterTab1, 2 o 3 es la clase de la solapa No seleccionada.

var tabs4422 = [['','','0'],['','','0'],['','','0'],['','','0']];   

for (var y = 0; y < 1; y++) 
{
	for (var x = 0; x < tabs4422.length; x++) 
	{
		if (tabs4422[x][y] != '') 
		{
			image = new Image();
			image.src = tabs4422[x][y];
		}  
	}
}

var disableSlideShow4422 = false;

function switchTab4422(tab, disableSlideShow, isTimeoutCall) 
{
	if (disableSlideShow) 
	{
		disableSlideShow4422 = true;
	}

	if (disableSlideShow4422 && isTimeoutCall) 
	{
		return;
	}

	for (var x = 0; x < tabs4422.length; x++) 
	{
		if ($('#masterTabContent4422_' + x + '.inDisplayTab').length > 0) 
		{
			document.getElementById('masterTabContent4422_' + x ).style.display = "none";
			// DESACTIVA LA SOLAPA CAMBIANDO LA CLASE CSS A masterTab0, 1, 2 o 3
			document.getElementById('masterTabList4422_' + x).className = "masterTab" + x;

			if (document.images["masterTabImage4422_" + x]) 
			{
				document.images["masterTabImage4422_" + x].src = tabs4422[x][0];
			}
		}
	}


	if (!$('#masterTabContent4422_' + tab + '.inDisplayTab').length > 0) 
	{
		for (var x = 0; x < tabs4422.length; x++) 
		{
			tab = ((tab + 1) % tabs4422.length);

			if ($('#masterTabContent4422_' + tab + '.inDisplayTab').length > 0) 
			{
				break;                
			} 
		}
	}          


	if ($('#masterTabContent4422_' + tab + '.inDisplayTab').length > 0) 
	{
		// ACTIVA LA SOLAPA CAMBIANDO LA CLASE A masterTabSelected0, 1, 2 o 3
		document.getElementById('masterTabList4422_' + tab).className = "masterTabSelected" + tab;
		document.getElementById('masterTabContent4422_' + tab).style.display = "block";

		if (document.images["masterTabImage4422_" + tab]) 
		{
			document.images["masterTabImage4422_" + tab].src = tabs4422[tab][1];
		}
	}

	if(window['onTabSwitched4422_' + tab]) 
	{
		window['onTabSwitched4422_' + tab].call();
	}
}  

Aprovecho para preguntar... se puede bajar el archivo .css al que se hace referencia en el HTML ???

[elpana22]

Mil gracias por tu ayuda, tendre que hacer un curso de css, no me queda otraaaa.
un abrazo

[estesua47]

Dnd, pero mi mira que CSS es lo de menos... aca lo mas complicado es HTML y JavaScript y sobre todo la combinación HTML+CSS+JavaScript.

Saludos.

[elpana22]

uhhh, eso parece dificl, tendre que ir de a poco, por ahora hago una pagina sencilla y listo.

un abrazo

[dsjose]

Hola,

No es nada dificil, practicamente alli tienes el 99% del trabajo ya hecho, esto se llama DHTML es simplemente HTML dinámico, hace de las webs tanto estáticas como dinámicas mas interactivas y le da una mejor cara o presentación hacia el usuario.

Saludos.