Bootstrap - Update only one of the div (Menu)

Navigation
0

I'm starting a project with bootstrap and would like to update only the div class = content when selecting any menu option.

How do I do it?

Follows: 

├── 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>
    
asked by anonymous 25.05.2018 / 21:15

1 answer

1

You can use the load() method of 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");
    });
})
  

If you use it, you do not need to use the tag .

    
25.05.2018 / 21:39
XCode - Adapt / fill screen for iPad mode Java FX - Thread Issues