HTML: Link a change of page

Question

HTML: Link a change of page

Navigation

#1 by (1 votes)

0

I'm doing a job for college in which I have to make a website in HTML as if it were from a company.

In the right column I intend to put links that would load other pages in the empty area but without reloading the whole page

All help is appreciated

html

asked by anonymous 19.12.2017 / 20:03

1 answer

How to center the CSS menu How to pass parameter in NSarray in url NSURLSessionDownloadTask

score 1 · Accepted Answer

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.br">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>