0

Estou iniciando um projeto com bootstrap e gostaria de atualizar somente a div class=content quando selecionar alguma opção do menu.

Como faço?

Segue:

├── html files
│   └── index.html
Src/
├── pages/
│   └── form1.html
│   └── form2.html


**index.html**

<body class="fixed-left widescreen">
<div id="wrapper">

    <!-- Top Bar Start -->
    <div class="topbar">
        <div class="topbar-left">
            LOGO
        </div>
    </div>
    <!-- Top Bar End -->


    <!-- ========== Left Sidebar start ========== -->
    <div class="left side-menu">
        <div class="sidebar-inner slimscrollleft">
            <!--- Divider -->
            <div id="sidebar-menu">
              <ul>
                <li>
                    <a href="form1.html">Form 1</a>
                </li>

                 <li>
                    <a href="form2.html">Form 2</a>
                </li>
              </ul>
            </div>
        </div>
    </div>
    <!-- ========== Left Sidebar end ========== -->

    <!-- ========== main content start ========== -->
    <div class="content-page">

        <!-- content -->
        <div class="content">
             **Atualizar aqui**
        </div>

        <!-- content -->

        <!-- footer -->
        <footer class="footer">
            2018
        </footer>
    </div>

    <!-- ========== main content end ========== -->

  </div>
</body>


**form1.html**

<form class="form-horizontal" role="form">
     <div class="form-group row">
         <label class="col-2 col-form-label" >Texto Form1</label>
         <div class="col-10">
            <input type="text" class="form-control" value="texto">                   
         </div>
      </div>
 </form>

**form2.html**

<form class="form-horizontal" role="form">
     <div class="form-group row">
         <label class="col-2 col-form-label" >Texto Form2</label>
         <div class="col-10">
            <input type="text" class="form-control" value="texto">                   
         </div>
      </div>
 </form>
3
  • 1
    Vai ter que utilizar javascript, algum problema em utilizar?
    – LeAndrade
    Commented 25/05/2018 às 19:19
  • 1
    Vc que só trocar o conteúdo ou quer chamar outro .html dentro da div?
    – hugocsl
    Commented 25/05/2018 às 19:27
  • Queria chamar outro html dentro da div. Se não tiver outra forma pode ser sim javascript.
    – Mamga
    Commented 25/05/2018 às 19:29

1 Resposta 1

1

Vc pode utilizar o método load() do jQuery.

Html:

<!-- content -->
<div class="content">

</div>

jQuery:

$(document).ready(function() {
    $("ul li:first").on("click", function() {  // primeira li
        $(".content").load("form1.html");
    });
    $("ul li:last").on("click", function() {   // segunda li
        $(".content").load("form2.html");
    });
})

Se utilizar assim não precisa utilizar a tag a.

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .