Page transition troubles in nav bar?

Page transition troubles in nav bar?

Hey guys. So right now I'm having a problem with making page transitions work using a nav bar.

I have an index.html located in my main directory, called CarneyConnect. Then I have a "pages" subdirectory which includes the four pages the navbar links to.

So from index.html, I can load one of the other pages with the navbar no trouble. For example, "CarneyConnect/#pages/video.html"

But say I am ON the video page, I can not load any others. If I try to use any of the links in the navbar from there, it will want to take me to "CarneyConnect/#pages/pages/video.html", for example. My code is as follows:

  1. <div data-role="footer" data-id="myfooter" data-position="fixed"> 
  2. <div data-role="navbar"> 
  3. <ul> 
  4.    <li><a href="video.html" class="ui-btn-active">Video</a></li>
  5.                             <li><a href="twitter.html">Twitter</a></li>
  6.                             <li><a href="blog.html">Blog</a></li>
  7.                             <li><a href="directory.html">Directory</a></li>
  8. </ul> 
  9. </div><!-- /navbar --> 
  10. </div><!--/footer-->
So can anyone help tell me how it is that by clicking on one of these links from one of the pages, it can take me to the proper directory?? Thanks!!