multi-page keeps CSS if using a href, but does not if using swipe
When using jquery swipe, the CSS of the first page changes when showing the second page. However, if I just use a simple link, it maintains the CSS.
Can someone please help explain what I am doing wrong to get this result?
Here's the basic code:
<!DOCTYPE html>
<html>
<head>
<title>jtest</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" title="standard" rel="stylesheet" href="themes/jquery.mobile-1.2.0.css">
<script src="jquery.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script>
$(function() {
$('.swipe').bind( 'swiperight', function(event){
$('#bar').show();
$('#foo').hide();
});
$('.swipe').bind( "swipeleft", function(event){
$('#foo').show();
$('#bar').hide();
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Hole 1</h1>
</div><!-- /header -->
<div data-role="content">
<div class='swipe'>
PAGE 1
<p>Next Page <a href="#bar">bar</a></p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Hole 2</h1>
</div><!-- /header -->
<div data-role="content">
<div class='swipe'>
PAGE 2
<p>Previous Page <a href="#foo">foo</a></p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>