0

hize un menú y la idea es que cuando le de click alguna de las opciones de mi menu no me recargue otra página si no que en la misma página donde esta el menu cargue la página que corresponde a la opción que se le dio click, no se como hacerlo. Agradezco su ayuda

* 
{
	margin:0px;
	padding:0px;
}			
#header 
{
	margin:auto;
	width:500px;
	font-family:Arial, Helvetica, sans-serif;
}			
ul, ol 
{
	list-style:none;
}			
.nav 
{
	width:500px; /*Le establecemos un ancho*/
	margin:0 auto; /*Centramos automaticamente*/
}
 
.nav > li
 {
	float:left;
}			
.nav li a 
{
	background-color:#000;
	color:#fff;
	text-decoration:none;
	padding:10px 12px;
	display:block;
}			
.nav li a:hover 
{
	background-color:#434343;
}			
.nav li ul 
{
	display:none;
	position:absolute;
	min-width:140px;
}			
.nav li:hover > ul 
{
	display:block;
}			
.nav li ul li 
{
	position:relative;
}			
.nav li ul li ul 
{
	right:-140px;
	top:0px;
}
<!DOCTYPE html>
<html lang = "es">
<head>
	<meta charset = "UTF-8">
	<title>Bienvenido al control de tarjetas</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="../css/reg.css">
	<link rel="stylesheet" href="../css/menu.css">
	<script src = "../js/jquery-3.2.1.min.js"></script>
	<script src="../js/menu1.js"></script>
	<script src="../js/menu.js"></script>
</head>
<body>
	<div id="header">
		<ul class="nav">
			<li><a href="">Inicio</a></li>
			<li><a href="">Capitan</a>
				<ul>
					<li><a href="#" id = "addCap">Agregar</a></li>
					<li><a href="">Modificar</a></li>
					<li><a href="">Eliminar</a></li>
				</ul>
			</li>
			<li><a href="">Acerca de</a>
				<ul>
					<li><a href="">Submenu1</a></li>
					<li><a href="">Submenu2</a></li>
					<li><a href="">Submenu3</a></li>
					<li><a href="">Submenu4</a></li>
				</ul>
			</li>
			<li><a href="">Contacto</a></li>
		</ul>
	</div>
	<div id="contenido" name="contenido">
	</div>
</body>
</html>

3
  • Tu pregunta no es clara, deberías detallar mas tu caso, sino la pregunta sera cerrada, ya que poner paginas en la pagina no es muy claro.
    – Andrés
    Commented el 12 ene. 2018 a las 3:43
  • La idea es que cuando le de click alguna de las opciones de mi menu no me recargue otra pagina si no que en la misma pagina donde esta el menu cargue la pagina que corresponde a la opcion qe se le dio click, no se como hacerlo Commented el 12 ene. 2018 a las 3:46
  • Y crear un iframe desde HTML y mostrarlo desde Javascript al hacer click, no sería suficiente ?
    – ESCM
    Commented el 12 ene. 2018 a las 12:30

2 respuestas 2

4

Vi que estás usando jQuery, puedes usar la propiedad load que basicamente hace una llamada a la url y si esta es exitosa asigna la respuesta al html que tu designas, el código me quedo mas o menos así.

Para que el javascript que te proporcioné funcione tienes que añadirle la ruta a los links, y a los que no desees que redirija le pones un #

<div id="header">
  <ul class="nav">
    <li><a href="page_1.html">Inicio</a></li>
    <li><a href="#">Capitan</a>
      <ul>
        <li><a href="page_2.html" id="addCap">Agregar</a></li>
        <li><a href="page_3.html">Modificar</a></li>
        <li><a href="page_4.html">Eliminar</a></li>
      </ul>
    </li>
    <li><a href="">Acerca de</a>
      <ul>
        <li><a href="">Submenu1</a></li>
        <li><a href="">Submenu2</a></li>
        <li><a href="">Submenu3</a></li>
        <li><a href="">Submenu4</a></li>
      </ul>
    </li>
    <li><a href="">Contacto</a></li>
  </ul>
</div>
<div id="contenido" name="contenido"></div>

El javascript

$('body').on('click', 'a', function(event) {
  event.preventDefault();
  var $target = $(event.currentTarget);
  var destinationLocation = $target.attr('href');
  if (destinationLocation !== '#') {
    $('#contenido').load(
        window.location.protocol + '//' + 
        window.location.host + '/' + 
        destinationLocation
    );
  }
});

Si decides ponerle la ruta completa a los links, por ejemplo <a href="http://example.com/page_1.html">Inicio</a> nada mas tendrás que usar $('#contenido').load( destinationLocation );

3
  • Muchas gracias por la ayuda, mañana pruebo y te comento como me fue Commented el 12 ene. 2018 a las 4:58
  • Excelente espero haber sido de ayuda
    – user22721
    Commented el 12 ene. 2018 a las 4:59
  • Muchas gracias me sirvio tu ayuda hizo lo que esperaba que hiciera. Commented el 13 ene. 2018 a las 3:19
0

Utilizando php una manera es con: isset($_GET['menu']) y dentro switch. Es decir:

if( isset($_GET['menu'])){ // Aqui comprobamos si el $_GET es = 'menu'
switch($_GET['menu']){
  case 1:
    include "inicio.php";
    break;
  case 2:
    include "aboutme.php";
    break;
   }
}

En caso de querer "case palabra"deberas usar:

  case 'inicio':
    include "inicio.php";
    break;

Esto se vera reflejado utilizando $_GET de la siguiente manera ej:

index.php?menu=inicio
// en la barra de navegación

Y mostrara el documento inicio.php

Si colocas el código <?php ?> dentro de algún contenedor "global" se ira intercambiando (swtich) con los demás archivos.

Espero que te haya servido. ^^

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.