jQuery Mobile 2- Navbar demo

This fiddle demonstrates navbar data-role.

by Brian von Konsky

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Business Web Technologies (ISYS3004) -->
<!-- School of Information Systems        -->
<!------------------------------------------
Try this:
1.  Add a an additional button.
2.  Change the icons to info, alert, and grid
3.  Notice introdution of class='ui-btn-active'
--------------------------------------------->

      <div id="Page1" data-role="page">
          <!-- navabar with three buttons -->
          <div data-role="navbar">
              <ul>
                  <li><a href="#Page1" data-icon='home' class='ui-btn-active'> Page 1 </a></li>
                  <li><a href="#Page2" data-icon='search'> Page 2 </a></li>
                  <li><a href="#Page3" data-icon='gear'> Page 3 </a></li>
              </ul>
          </div>
          
          <!-- Content for the page goes here -->
          <div  data-role="content">
              <p>This is Page 1.</p>
          </div>
          
          <!-- Content for the footer goes here -->
          <div data-role="footer" data-position="fixed">
              <h4>Business Web Technologies (ISYS3004)</h4>
          </div>
      </div>
      
      <div id="Page2" data-role="page">
          <!-- navabar with three buttons -->
          <div data-role="navbar">
              <ul>
                  <li><a href="#Page1" data-icon='home' > Page 1 </a></li>
                  <li><a href="#Page2" data-icon='search' class='ui-btn-active'> Page 2 </a></li>
                  <li><a href="#Page3" data-icon='gear'> Page 3 </a></li>
              </ul>
          </div>
          
          <!-- Content for the page goes here -->
          <div  data-role="content">
              <p>This is  Page 2</p>
          </div>
          
          <!-- Content for the footer goes here -->
         ...