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>