Tengo una página de prueba que tiene un menú y más abajo un iframe
que me muestra una tabla de ventas. Esa tabla de ventas la tengo creada en otro fichero .html
en el mismo directorio que la pagina index. Bien, mi idea es que cuando el usuario pulse un elemento del menú, el contenido del iframe cambie. Por ejemplo, cuando pulse en Usuarios, el contenido del iframe sea la tabla de usuarios y cuando pulse en ventas, el contenido sea ventas.
Las tablas de usuarios.html y ventas.html están en el mismo directorio que el index.
Este es mi código de index.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" id="ventas" href="#">Ventas <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="usuarios" href="#">Usuarios</a>
</li>
</ul>
</div>
</nav>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="iframe" class="embed-responsive-item" src="ventas.html" allowfullscreen></iframe>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
¿Alguna ayuda? He leído que se podría hacer con JQuery o JavaScript pero no soy muy bueno en esos lenguajes