Use Header,Main,Footer as Frames

Asked

Viewed 90 times

0

Good afternoon, you guys. I started using html at the time of the front page, at the time we used frames to have the link only in the body of the page, leaving the static top without loading in a new page. Today I’m studying css, bootstrap and such. but I saw that we have the tags <header>, <main> and <footer>. I would like in the header to let my header (logo, navbar and such) and the called links go only to main, ie, replace only the main content. Could you? I tried with target using the main id, but it opens a new page.

<!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>

html jquery css

1 answer

1


You can create a function and use the method load() 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>

  • Thank you very much. I will implement.

  • I found a simple solution using the id of the element I want you to receive the page. no link I place the link calling a js function with the '#' of the id that will receive the page. <! -- Begin snippet: js Hide: false console: true Babel: false --> <! -- language: lang-js --> <script> Function load(page){ $("#content"). load(page); } </script> <! -- language: lang-html --> <a onclick="load('home.html')" href="#">Home</a> <! -- end snippet -->

  • Yes, in that case you changed the dial... the javascript:; serves only as a preventDefault... to prevent any refresh or the scroll from going to the top while the content loads

Browser other questions tagged html jquery css

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