title: Load different pages within one html-page?
body: <p>I'm building an admin page using Bootstrap. In the admin page I have a side-menu and a content-block, and I want to both change the current menu-item to the class "active" when clicked, and show different content depending on the menu-item. At the moment I have different html pages for each menu-item. I find this pretty inconvenient though, since if I want to change something within the side-menu, or other things that all pages have in common, I have to make the same changes to every html-script. Therefore, I'm thinking of having one parent html-page that shows different content depending on what menu-item is clicked. Pretty easy stuff, although there are very many ways to do this e.g. using an iframe, using JS either showing and hiding different divs, or to load content with links, among many others.</p>
  
  <p>What are the downsides and upsides of the different approaches, and which one is most commonly used?</p>
  
  <p>Here's some sample code:</p>
  
  <pre><code>&lt;section class="sidebar"&gt;
      &lt;ul class="sidebar-menu"&gt;
          &lt;li class="active"&gt;
              &lt;a href="overview.html"&gt;Overview&lt;/a&gt;
          &lt;/li&gt;              
          &lt;li&gt;
              &lt;a href="theme.html"&gt;Theme&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  
  &lt;section class="content"&gt;
      Content
  &lt;/section&gt;
  </code></pre>