how to load several pages on the same page

Question

how to load several pages on the same page

Navigation

#1 by (4 votes)
#2 by (0 votes)

0

I made a menu and the idea is that when you click on any of the options in my menu I do not recharge another page, but in the same page where the menu loads the page that corresponds to the option that was given click, I do not know how to do it. I appreciate your help

* 
{
	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>

javascript html5 html php

asked by Familia Valencia Hdz 12.01.2018 в 04:31

source

2 answers

0

Using php one way is with: isset($_GET['menu']) and within switch . That is:

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;
   }
}

In case of wanting "case palabra" you should use:

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

This will be reflected using $_GET as follows eg:

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

And it will show the document inicio.php

If you place the code <?php ?> within some contenedor "global" it will be exchanged ( swtich ) with the other files .

I hope you've served . ^^

answered by 26.01.2018 в 02:16

My user never logs in php Compare a text with a multidimensional array with regular expressions

score 4 · Accepted Answer

I saw that you are using jQuery, you can use the property load that basically makes a call to the url and if it is successful Assign the answer to the html that you design, the code stayed more or less like this.

In order for the javascript I gave you to work, you have to add the path to the links, and to those that you do not want to redirect, you put a #

<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>

The 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
    );
  }
});

If you decide to put the complete path to the links, for example <a href="http://example.com/page_1.html">Inicio</a> nothing else you will have to use $('#contenido').load( destinationLocation );