title: Simple Navbar in Jquery Mobile not working
body: <p>I'm trying to do a simple jquery mobile navbar like the one shown here:</p>
  
  <p><a href="http://demos.jquerymobile.com/1.4.0/tabs/#&amp;ui-state=dialog" rel="nofollow noreferrer">http://demos.jquerymobile.com/1.4.0/tabs/#&amp;ui-state=dialog</a></p>
  
  <p>The problem I'm having is that when I link to an html file, it loads without any styling or "jquery mobileness".  Here are my snippets</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
      &lt;link rel="stylesheet" href="Content/jquery.mobile-1.4.0.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="homePage" data-role="page"&gt;
          &lt;div data-role="header" data-position="fixed" &gt;
              &lt;h1&gt;Header&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="tabs" id="tabs"&gt;
              &lt;div data-role="navbar" &gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="maps.html" data-ajax="false"&gt;Map&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#events"&gt;Events&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div data-role="content"&gt;
                  &lt;div id="events"&gt;
                      &lt;ul data-role="listview" data-inset="true" data-divider-theme="b"&gt;
                          &lt;li data-role="list-divider"&gt;1&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
                          &lt;li data-role="staclist-divider"&gt;2&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;d&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;script src="Scripts/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery.mobile-1.4.0.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>maps.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role="content"&gt;
              &lt;ul data-role="listview" data-inset="true" data-divider-theme="a"&gt;
                  &lt;li data-role="list-divider"&gt;1&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
                  &lt;li data-role="list-divider"&gt;2&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;d&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>The #events id loads just fine.  I'm expecting the content of maps.html (which is identical to the #events div) to load.  Perhaps I'm misunderstanding how jquery mobile works, but the demo makes it look like what I'm doing is possible.  Instead, I'm just getting something like this</p>
  
  <p><img src="https://i.stack.imgur.com/GgPss.png" alt="unstyled"></p>
  
  <p>When I'm expecting this:</p>
  
  <p><img src="https://i.stack.imgur.com/W4VJW.png" alt="styled"></p>
  
  <p>I know I could just throw it all onto one page, but I'm really hoping not to.  I'm also hoping not to repeat the header on every page.  This seemed like a decent solution, but I feel like I might not be using the tools properly.  I've tried googling and have found other examps, but I am not sure why mine isn't working.</p>