HTML Adicionar conteúdos nas sessões do navbar

M.tech · 2 de março de 2021

Olá, estou aprendendo a utilizar a tag nav, porém não sei como adicionar os conteúdos dentro de cada sessão do navbar

exemplo:

HOME: ao clicar em home volta a página inicial

SOBRE: ao clicar mostra o conteúdo referente ao site

CONTATOS: ao clicar mostra o conteúdo contatos

não achei nenhum material sobre isso na internet, apenas como montar o navbar e fazer a estilização.

código:

<div class="topnav">
    <a class="active"href="#home">Home</a>
    
    
    <a href="#About">About</a>
    <a href="#contact">Contact</a>
    <a href="#features">Features</a>
    
</div>

a solução pode ser utilizando javascript também. desde já agradeço

Marcelo Calazans · 2 de março de 2021

@M.tech Era isso que você queria?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body> 

<style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
</style>

<nav>
  <a href="#">HOME</a>
  <a href="#">SOBRE</a>
  <a href="#">CONTATOS</a>
</nav>

</body>
</html>

Na verdade eu nem precisei ter o trabalho de escrever este código, pois existem muitos exemplos sobre isso na Internet.

Veja se era isso que você queria, e se for, espero ter ajudado.

Abraços.

M.tech · 3 de março de 2021

não...o Css já sei fazer, queria saber como adicionar os conteúdos em cada área do navbar separada, a solução que encontrei foi criar htmls diferentes e mencionar o caminho nas href. Obrigado