Bootstrap - Update only one div (Menu)

Asked

Viewed 220 times

0

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

How do I do?

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>
css div sass bootstrap-4
  • 1

    You will have to use javascript, some problem using?

  • 1

    You just change the content or want to call another . html inside the div?

  • I wanted to call another html inside the div. If there is no other way it can be yes javascript.

1 answer

1


You can use the method load() 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 this way you don’t need to use the tag to.

Browser other questions tagged css div sass bootstrap-4

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