Sistemas de Tabs con el contenido en la misma pagina

[genuine_carlosV2]

Buenas,

Fíjate en este código, sólo tiene una linea de diferencia:

Código HTML:

<script type="text/javascript">
<!--
* * function cambiarPestana( pestana ) {
* * * * //Ocultar TODAS las pestañas
* * * * document.getElementById( 'pestana1' ).style.display = 'none';
* * * * document.getElementById( 'pestana2' ).style.display = 'none';
* * * * document.getElementById( 'pestana3' ).style.display = 'none';
* * * * document.getElementById( 'pestana4' ).style.display = 'none';
* * * * 
* * * * //Mostrar la pestaña que nos piden
* * * * document.getElementById( 'pestana' + pestana ).style.display = 'block';
* * }
    cambiarPestana( 1 );  //Linea nueva!!! En vez de 1, puedes poner la pestaña que quieras que esté por defecto
-->
</script>
<a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
<a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
<a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
<a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
<div id="pestana1" style="display: none">Cosas de la pestaña 1</div>
<div id="pestana2" style="display: none">Cosas de la pestaña 2</div>
<div id="pestana3" style="display: none">Cosas de la pestaña 3</div>
<div id="pestana4" style="display: none">Cosas de la pestaña 4</div>
 

También, si quieres, puedes crear una quinta pestaña con el contenido por defecto de modo que solo aparezca una vez:

Código HTML:

<script type="text/javascript">
<!--
* * function cambiarPestana( pestana ) {
* * * * //Ocultar TODAS las pestañas
* * * * for( i = 0; i <= 4; i++ ) document.getElementById( 'pestana' + i ).style.display = 'none';
* * * * 
* * * * //Mostrar la pestaña que nos piden
* * * * document.getElementById( 'pestana' + pestana ).style.display = 'block';
* * }
-->
</script>
<a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
<a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
<a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
<a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
<div id="pestana0" style="display: block">Cosas que sólo verás una vez!!</div>
<div id="pestana1" style="display: none">Cosas de la pestaña 1</div>
<div id="pestana2" style="display: none">Cosas de la pestaña 2</div>
<div id="pestana3" style="display: none">Cosas de la pestaña 3</div>
<div id="pestana4" style="display: none">Cosas de la pestaña 4</div>
 

Si te fijas, en este código le he añadido también un pequeño bucle para que te ayude a controlar la cantidad de pestañas que tienes. De este modo, cambias el 4 por un 7 y listo.
Fíjate también que no hace falta que añadas una pestaña para tener tu contenido por defecto. También puede ser una pestaña que ya tengas cambiando su 'block' por 'none'.

P.D.: Con este código también podrías aumentar la usabilidad haciendo algo como lo que decía caricatos. Para ello, tan solo tienes que iniciar todos los DIVs con 'display: block' (en vez de 'display: none') y, añadir la linea 'cambiarPestana( 0 );' (o la pestaña que quieras tener por defecto) en la misma posición que en el código anterior. Esto hará que si no se tiene el JS activo, veas todas las pestañas y, si lo tienes activo, la función 'cambiarPestana', te esconderá todas las pestañas menos la que no quieres ver.

Saludos y suerte!