Я создал простой двухстраничный пример, первая страница имеет вид списка, а вторая просто <h1>, однако, когда вторая страница загружается, теперь к ней автоматически применяются стили пользовательского интерфейса? Нужно ли что-то вызывать вручную или есть проблема с тем, как я выложил навигацию? Код ниже любая помощь высоко ценится.
index.html
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Page One</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="second">
<div data-role="header">
<h1 id="logo" class="ui-title">Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-split-theme="d">
<li class="ui-li-has-thumb">
<img class="ui-li-thumb" src="http://jquerymobile.com/demos/1.0a2/docs/lists/images/album-bb.jpg" />
<h3 class="ui-li-heading">FooBar</h3>
<p class="ui-li-desc">Progress</p>
<a href="second.html"></a>
</li>
<li class="ui-li-has-thumb">
<img class="ui-li-thumb" src="http://jquerymobile.com/demos/1.0a2/docs/lists/images/album-bb.jpg" />
<h3 class="ui-li-heading">FooBar</h3>
<p class="ui-li-desc">Progress</p>
<a href="second.html"></a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-glyphish">
<ul>
<li><a class="ui-btn-active" id="quickfind" href="index.html" data-icon="custom">QuickFind</a></li>
<li><a id="lessons" href="lessons.html&ui-page=listview-1" data-icon="custom" data-theme="a">Lessons</a></li>
<li><a id="progress" href="#" data-icon="custom" data-theme="a">Progress</a></li>
<li><a id="favs" href="#" data-icon="custom" data-theme="a">Favs</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
second.html
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Page Two</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1 id="logo" class="ui-title">Second</h1>
</div>
<div data-role="content">
<h1>Hello Page Two</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-glyphish">
<ul>
<li><a class="ui-btn-active" id="quickfind" href="index.html" data-icon="custom">QuickFind</a></li>
<li><a id="lessons" href="lessons.html&ui-page=listview-1" data-icon="custom" data-theme="a">Lessons</a></li>
<li><a id="progress" href="#" data-icon="custom" data-theme="a">Progress</a></li>
<li><a id="favs" href="#" data-icon="custom" data-theme="a">Favs</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>