Pagina Vuelve A Arriba

[Juanmax]

Hola, tengo una funcion que despliega un contenido al presionar un boton. El problema es que al volver a presionar la pagina se desplaza al inicio (arriba). Este es el codigo:

Código:

 
function MostrarOcultar(parr)
{
	var np = 'p' + parr; /*numero de parrafo*/
	var na = 'a' + parr; /*numero de enlace*/
	var idimg = 'img' + parr;

	var elem = document.getElementById(np);
	var enlace = document.getElementById(na);
	var img = document.getElementById(idimg);

	if (elem.style.display=='block')
	{
		/*si esta visible lo oculta y cambia el texto del enlace*/
		elem.style.display = 'none';
		enlace.title = 'Ampliar información';
		img.src='imagenes/Btn_leer.jpg'
	}
	else
	{
		/*si esta oculto lo muestra y cambia el texto del enlace*/
		elem.style.display = 'block';
		enlace.title = 'Ocultar información';
		img.src='imagenes/Btn_noleer.jpg'
	}
	return;
}
</script>


<div class="columna-izq" >
<h1 style="font-size: 11px">ENTREMESES / ENTRANTS / STARTERS<a href="#" title="Ampliar informaci&oacute;n" id="a1" onClick="MostrarOcultar('1'); return false" >
	<img id="img1" src="imagenes/Btn_leer.jpg" alt="Expandir Carta" border="0"/>
	</a></h1>
	<p id="p1" style="display:none; font-size: 11px">
		Texto	</p>


<h1 style="font-size: 11px">ENSALADAS / AMENIDES / SALADS<a href="#" title="Ampliar informaci&oacute;n" id="a2" onClick="MostrarOcultar('2'); return false" >
	<img id="img1" src="imagenes/Btn_leer.jpg" alt="Expandir Carta" border="0"/>
	</a></h1>
	<p id="p2" style="display:none; font-size: 11px">
		Texto	</p>

... etc...
Muchas Gracias !!

[caricatos]

Hola:

Será un botón tipo submit... ponlo del tipo button y nos cuentas...

Saludos

[agressor]

Viejo disculpa pero a mi me funciona verifica bien todo tu codigo.. a mi me sale sin ninung problema.. revisa.. tal vez te sale..

[Aeyon_flux]

Tu problema esta en los enlaces que estan especificados para las imagenes:

Fijate que dice href='#', esto te lleva hacia la parte superior de la pagina...
lo que mejor puedes hacer, es asociarle al href, el evento javascript del Onclick.

Por lo que el codigo de las imagenes quedaria asi:

<h1 style="font-size: 11px">ENTREMESES / ENTRANTS / STARTERS<a href="javascript:MostrarOcultar('1'); return false;" title="Ampliar informaci&oacute;n" id="a1" >
<img id="img1" src="imagenes/Btn_leer.jpg" alt="Expandir Carta" border="0"/>
</a></h1>
<p id="p1" style="display:none; font-size: 11px">
Texto </p>


<h1 style="font-size: 11px">ENSALADAS / AMENIDES / SALADS<a href="javascript: MostrarOcultar('2'); return false;" title="Ampliar informaci&oacute;n" id="a2" >
<img id="img1" src="imagenes/Btn_leer.jpg" alt="Expandir Carta" border="0"/>
</a></h1>
<p id="p2" style="display:none; font-size: 11px">
Texto </p>

Espero que te sirva
Saludos

[agressor]

Sin ofenderte Aeyon_flux pero no funciona creo que deberia revisar de nuevo su codigo a mi me funciona el unico que eror que me tira es la imagen del segundo link que no la encuentra pero me lo ejecuta de igual manera...

Intenta colocar la funcion Javascript despes la < a onclick() href="#" tal vez te funcione a mi me funciona sin problema.. no se a ti que tal ..

Aqui te la pongo..

<script>
function MostrarOcultar(parr)
{
var np = 'p' + parr; /*numero de parrafo*/
var na = 'a' + parr; /*numero de enlace*/
var idimg = 'img' + parr;

var elem = document.getElementById(np);
var enlace = document.getElementById(na);
var img = document.getElementById(idimg);

if (elem.style.display=='block')
{
/*si esta visible lo oculta y cambia el texto del enlace*/
elem.style.display = 'none';
enlace.title = 'Ampliar información';
img.src='imagenes/Btn_leer.jpg'
}
else
{
/*si esta oculto lo muestra y cambia el texto del enlace*/
elem.style.display = 'block';
enlace.title = 'Ocultar información';
img.src='imagenes/Btn_noleer.jpg'
}
return;
}
</script>

<h1 style="font-size: 11px">ENTREMESES / ENTRANTS / STARTERS<a onClick="javascript:MostrarOcultar(1); return false;" href="#" title="Ampliar informaci&oacute;n" id="a1" >
<img id="img1" src="imagenes/Btn_leer.jpg" alt="Expandir Carta" border="0"/>
</a></h1>
<p id="p1" style="display:none; font-size: 11px">
Texto </p>


<h1 style="font-size: 11px">ENSALADAS / AMENIDES / SALADS<a onClick="Javascript: MostrarOcultar('2'); return false;" href="#" title="Ampliar informaci&oacute;n" id="a2" >
<img id="img1" src="imagenes/Btn_leer.jpg" alt="Expandir Carta" border="0"/>
</a></h1>
<p id="p2" style="display:none; font-size: 11px">
Texto </p>

Espero te sirva..

Salu2..!!!

[lamek]

Lo que tienes que poner en el href es esto, href="void(0)" y en el onclick el javascript... asi no subira...

saludos.