0

Boa tarde galera. Comecei a usar html no tempo do front page, na epoca usavamos frames pra ter o link somente no corpo da pagina, deixando o topo estatico sem carregamento numa nova pagina. Hoje estou estudando css, bootstrap e tal. porem vi que temos as tags <header>, <main> e <footer>. Gostaria de no header deixar meu cabeçalho (logo, navbar e tal) e os links chamados irem somente pro main, ou seja, substituírem somente o conteúdo do main. Teria como? Tentei com target usando a id do main, mas ele abre uma nova pagina.

<!doctype html>
<html lang="pt-br">
  <head>
    <!-- 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="/css/bootstrap.css">

    <title>Treinos de Bootstrap</title>
  </head>
  <body>
  <header>
    
    <div class="container fixed-top">
        <nav class="navbar navbar-expand-lg navbar-light bg-primary">
                    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSite">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                        <div class="collapse navbar-collapse" id="navbarSite">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="teste.html" data-target="corpo">Inicio</a>
                    </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#">Sobre</a>
                    </li>
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" id="dropDownSite" data-toggle="dropdown" href="#">Produtos</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="0">Produto 01</a>
                            <div class="dropdown-divider">  </div>
                            <a class="dropdown-item" href="0">Produto 02</a>
                            <a class="dropdown-item" href="0">Produto 03</a>
                            <a class="dropdown-item" href="0">Produto 04</a>
                        </div>
                    </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#">Contato</a>
                    </li>
                        
                </ul>
            </div>
            
        </nav> 
        
        <div>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary border-bottom">
          <a class="navbar-brand m-auto" href="#">Clayton</a></nav></div></div>
          <div class="container margem_topo">
         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="/images/sl1.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/images/sl2.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/images/sl3.png" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
              </div>
      </div>
            
     
        </header>
        <main id="corpo" class="evitar_sobre">
        <div class="container">
        <h2>
primeiro<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br></h2>
            </div>
      </main>
   
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="/js/jquery-3.2.1.slim.min.js"></script>
<script src="/js/popper.min.js" ></script>
<script src="/js/bootstrap.min.js"></script>
  </body>
</html>

1 Resposta 1

0

Você pode criar uma função e utilizar o método load() do jquery

let carregarNaMain = (url) => {
  $("#corpo").load(url);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <a href="javascript:;" onclick="carregarNaMain('seu_link')">pergunta</a>
</header>
<main id="corpo" class="evitar_sobre"></main>

3
  • Muito obrigado. vou implementar.
    – user216409
    15/12/2020 às 16:08
  • achei uma solução simples usando o id do elemento que quero que receba a pagina. no link coloco o link chamando uma função js com o '#' do id que vai receber a pagina. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> <script> function carregar(pagina){ $("#conteudo").load(pagina); } </script> <!-- language: lang-html --> <a onclick="carregar('home.html')" href="#">Home</a> <!-- end snippet -->
    – user216409
    27/12/2020 às 22:30
  • Sim, nesse caso você mudou o seletor... o javascript:; serve apenas como um preventDefault... para para impedir qualquer refresh ou que o scroll vá para o topo enquanto o conteúdo carrega 28/12/2020 às 19:52

Você deve fazer log-in para responder a esta pergunta.