HTML: Link a page change

Asked

Viewed 42 times

0

I am doing a job for college in which I have to do an HTML site as if it were a company.

In the right column I should place links that would load other pages in the empty area but without reloading the entire page

All help is appreciatedinserir a descrição da imagem aqui

html

  • You can use iframes to learn how to do this link https://www.codigofonte.net/dicas/html/296_direction-links-para-um-iframe

1 answer

1


The simplest way is to use iframe, but you can use jQuery, Xmlhttprequest, etc.

Example with iframe

var menu = document.querySelectorAll("nav ul li a");
var iframe = document.querySelector("iframe");

menu.forEach(function(el) {
   el.addEventListener("click", function(e) {
      e.preventDefault();
      
      alert("Nesse site não vai funcionar");
      iframe.src = el.getAttribute("href");
   });
});
* {
  padding: 0;
  margin: 0;
}
nav ul {
 list-style-type: none;
 width: 100%
}
nav ul li {
  float:left;
  margin-left: 20px;
  padding: 20px;
  background:#CCC;
}

iframe {
  float:left;
  height: 300px;
  width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
  <nav>
    <ul>
      <li><a href="https://www.google.com">Google</a></li>
      <li><a href="https://fb.com">Facebook</a></li>
      <li><a href="https://twitter.com">Twitter</a></li>
    </ul>
  </nav>
  
  <iframe src="/"></iframe>
</body>

</html>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.