index.html

<!DOCTYPE html>
<html>
<head>
<title>WiseEvent</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script type="text/javascript">
	function getHome()
	{
		$("#cont").load('home.html',function(){
		$('#cont').trigger('create');
	});
	}
	$(document).ready(function(){
		getHome();
		$("#shownav").click(function(){
			$("#navigatoin-box").slideToggle();
		})
	});
	function getTable()
	{
		
	//$("#cont").load('css/jquery.mobile-1.3.1.css');
	//$("#cont").load('css/custom.css');
	$("#cont").load('table.html',function(){
		$('#cont').trigger('create');
	});
	$('.footerLinks li').removeClass('active');
	$(this).closest('li').addClass('active');
	

	}
	function getBenefits()
	{
	
	//$("#cont").load('css/jquery.mobile-1.3.1.css');
	//$("#cont").load('css/custom.css');
	$("#cont").load('benefits.html',function(){
		$('#cont').trigger('create');
	});
	
	$('.footerLinks li').removeClass('active');
	$(this).closest('li').addClass('active');
	
	}
	
	function getGuest()
	{
	
	//$("#cont").load('css/jquery.mobile-1.3.1.css');
	//$("#cont").load('css/custom.css');
	$("#cont").load('guests.html',function(){
		$('#cont').trigger('create');
	});
	
	$('.footerLinks li').removeClass('active');
	$(this).closest('li').addClass('active');
	
	}
</script>
</head>
<body>
<div data-role="page" data-theme="a" class="bodybg">
	<div>
    <div data-role="header">
		<a href="#" class="refresh" data-iconpos="notext" ></a>
    <h1><img src="images/logo.png" width="50" alt=""></h1>
    <a href="#" data-iconpos="notext" class="nav" id="shownav"></a>
    <div id="navigatoin-box" >
        	<div class="navigation">
            	<div class="topArrow"></div>
                <ul class="navLinks">
                    <li> <a  href="#"><span class="add_icon"></span>Add guest</a></li>
                	<li> <a  href="#"><span class="trash_icon"></span>Delete guest</a></li>
                    <li> <a  href="#"><span class="detail_icon"></span>Statistics</a></li>
                    <li> <a  href="#"><span class="logout_icon"></span>Exit</a></li>
                    
                </ul>
            </div>
        
        </div>
    
	</div><!-- /header -->
	<div data-role="content" id="cont">
    
	</div><!-- /content -->

	<div data-role="footer" class="ui-bar" data-position="fixed">
        <div class="footerLinks">
        	<ul>
            	<li class="active"><a class="" onClick="getHome();"><span class="main_icon"></span> main</a></li>
                <li><a class="" onClick="getGuest();"><span class="guest_icon"></span> Guests</a></li>
                <li><a class="" onClick="getTable();"><span class="table_icon"></span> tables</a></li>
                <li><a class="" onClick="getBenefits();"><span class="benefits_icon"></span> benefits</a></li>
            
            </ul>
        
        </div>

	</div><!-- /footer -->
</div><!-- /page -->
    
    
    
    

	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>