Как использовать вкладку управления javascript?

Question

Я создал 2 страницы. Один из них называется home.html, который ссылается на products.html. Когда я проверю это, я открою home.html и перейдите по ссылке products.html. Но javascript в products.html не работает (см. Код ниже).

Это products.html:

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1> 
      page1 
     </h1> 
    </div> 
    <div data-role="content"> 
     Content1</div> 
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page1" class="ui-btn-active ui-state-persist">One</a></li> 
       <li><a href="#page2">Two</a></li> 
       <li><a href="#page3">Three</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!-- end page1--> 

<div data-role="page" id="page2"> 
    <div data-role="header"> 
     <h1> 
      page2 
     </h1> 
    </div> 
    <div data-role="content"> 
     Content2</div> 
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page1">One</a></li> 
       <li><a href="#page2" class="ui-btn-active ui-state-persist">Two</a></li> 
       <li><a href="#page3">Three</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!-- end page2--> 

<div data-role="page" id="page3"> 
    <div data-role="header"> 
     <h1> 
      page3 
     </h1> 
    </div> 
    <div data-role="content"> 
     Content3</div> 
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page1">One</a></li> 
       <li><a href="#page2">Two</a></li> 
       <li><a href="#page3" class="ui-btn-active ui-state-persist">Three</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!-- end page3--> 

рабочая скрипка теперь доступна на http://jsfiddle.net/JkYSa/, благодаря пользовательским али-carikcioglu.

Может кто-нибудь объяснить мне, почему это не работает?

Answer 1

С точки зрения вещей вы используете jQuery Mobile в products.html. Так как скрипты, которые вы опубликовали, оба указывают на одно и то же, и нет правильного html/js там, я могу только предположить, что у вас есть проблема в том, что вы не указали products.html на источник jQuery и jQuery.

добавить к вашей голове

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

http://learn.jquery.com/jquery-mobile/getting-started/ может быть хорошим местом, чтобы смотреть на обучение, как использовать рамки