I have a lot of seperate html pages in different folders and I want to know the best way to link to these external pages so i can still use transitions 

In my index.html page I have am using this script below to load them into the dom which seems to work ok but I was wondering if this was remotely correct or there was a better way to do this. 

<script>

            $.mobile.loadPage( "River/index.html" );

            $.mobile.loadPage( "Heritage/index.html" );

            $.mobile.loadPage( "Nature/index.html" );

            $.mobile.loadPage( "Produce/index.html" );

            $.mobile.loadPage( "Cycle/index.html" );

            $.mobile.loadPage( "Riverbedz/index.html" );

            $.mobile.hidePageLoadingMsg();

        </script>

Thanks for your help