Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Pestañas en una página (todo el contenido en la misma página)

El concepto trata sobre:html,css,js,dhtml
Autor:

Retornar

Nombre del archivo:pagina1.html

Comentarios
Importamos los dos archivos que contienen las funciones de javascript:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
Como el archivo jquery.js se encuentra en el mismo servidor en la carpeta padre debemos incorporarla
indicando dicho path: src="../jquery.js"
Las pestañas las conforman una lista que contienen un conjunto de hipervínculos con la referencia al
div que se debe mostrar:
    <li><a href="#pagina1">El concierto</a></li>
    <li><a href="#pagina2">Biromes</a></li>
    <li><a href="#pagina3">Zanguango</a></li>
Cada pestaña muestra el contenido de un div que tiene el siguiente formato:
<div class="contenido" id="pagina1">
    <h2>El concierto </h2>
      <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/JXbE9F89mKc&rel=1">
      </param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/JXbE9F89mKc&rel=1" 
       type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
</div>
Es necesario que el div tenga estas dos propiedades:
class="contenido" id="pagina1"
mediante su id posteriormente con javascript permitiremos que se muestre u oculte.

Como podemos ver la página tiene el contenido de todas las pestañas, luego mediante javascript
activamos el div que queremos que se muestre.
Nombre del archivo:estilos.css

Comentarios
Tenemos dos clases que indican los valores de los atributos del hipervínculo seleccionado:
.seleccionada {
  background-color: #48f;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  width:150px;
  text-decoration:none;
  text-align:center;
  color: #008;
  height: 2em;
  line-height: 2em;
  font-family: Verdana, Arial, sans-serif;
}

y los hipervínculos no seleccionados:
.noseleccionada {
  background-color: #bdf;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  width:150px;
  text-decoration:none;
  text-align:center;
  color: #008;
  height: 2em;
  line-height: 2em;
  font-family: Verdana, Arial, sans-serif;
}

Tambien definimos el estilo para la lista:
#menu {
    float:left;
    width:100%;
    list-style-type:none;
    height: 2em;
    float:left;
}

y por último los estilos del div del contenido:
.contenido {
  border: #48f solid 5px;
  clear: left;
  padding: 10px;
  margin:0;
  background-color:#F9F7ED;
}


Nombre del archivo:funciones.js

Comentarios
Definimos dos variables globales, la primera almacena la referencia del hipervínculo activo (es decir el último
que se seleccionó) y la segunda variable almacena la referencia del div del contenido que se está mostrando:
var actualselec;
var actualconte;

En la función inicializarEventos, obtenemos la referencia de todos los hipervínculos contenidos en la lista
menu :
  var x;
  x=$("#menu a");
luego le añadimos a todos esos hipervínculos la clase "noseleccionada" y definimos el evento click
  x.addClass("noseleccionada");
  x.click(presionPestana);
Obtenemos la referencia del primer hipervínculo, lo almacenamos en la variable global actualselec y le
borramos la clase noseleccionada y agregamos la clase seleccionada (con esto arranca la primer pestaña
de la lista seleccionada):  
  x=x.eq(0);
  actualselec=x;
  x.removeClass("noseleccionada");
  x.addClass("seleccionada");
Obtenemos la referencia de todos los div que contienen la clase "contenido" y los ocultamos:
  x=$(".contenido");
  x.hide();
Obtenemos la referencia del primer div, almacenamos dicha referencia en la variable actualconte y lo hacemos
visible:
  x=x.eq(0);
  actualconte=x;
  x.show();

Cuando se presiona alguna pestaña (es decir alguno de los hipervínculos):
Primero removemos la clase de la pestaña actualmente seleccionada y le agregamos la clase noseleccionada
(con esto la pestaña actualmente seleccionada queda no seleccionada):
  actualselec.removeClass("seleccionada");
  actualselec.addClass("noseleccionada");
Seguidamente removemos la clase noseleccionada de la pestaña que acabamos de presionar y le añadimos la
clase "seleccionada":
  $(this).removeClass("noseleccionada");
  $(this).addClass("seleccionada");
Luego almacenamos la referencia del hipervínculo que acabamos de presionar:
  actualselec=$(this);
Ocultamos el contenido que se estaba mostrando hasta ahora:
  actualconte.hide();
y mostramos el contendio según el hipervínculo presionado:
  $($(this).attr("href")).show();
Guardamos la referencia del div que ahora se está mostrando:
  actualconte=$($(this).attr("href"));

Retornar



Código Fuente Ya - 2015