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>