2016-10-07 3 views
0

Добрый день, я пытаюсь создать мобильное веб-приложение через JQuery, и я пытаюсь связать страницы в нижнем колонтитуле.Ссылка на JQuery Мобильные страницы

Я думаю, что правильно закодировал его из просмотра видеороликов, и если бы у меня не было, я знаю, что это будет что-то глупое, что я забыл.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>jQuery Mobile Web App</title> 
 
<link href="../jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> 
 
<script src="../jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script> 
 
<script src="../jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script> 
 
</head> 
 

 
<body> 
 

 
<div data-role="page" id="page"> 
 
\t <div data-role="headerimg"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
\t </div> 
 
    
 
    <div data-role="content"> 
 
    
 
    \t 
 
    <a href="#page" data-role="button" data-icon="plus">Home</a> 
 
    <a href="#page2" data-role="button" data-icon="plus">Tickets</a> 
 
\t <a href="#page3" data-role="button" data-icon="plus">Shop</a> 
 
\t <a href="#page4" data-role="button" data-icon="plus">Photos</a> 
 
    <a href="#page5" data-role="button" data-icon="plus">Join Us</a> 
 
\t <a href="#page6" data-role="button" data-icon="plus">More</a> 
 
\t 
 
    </div><!-- footer --> 
 

 
<div data-role="page" id="page2"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
\t </div> 
 
    <H1>TICKETS</H1> 
 
\t <div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t \t <div data-role="footer" data-position="fixed"> 
 
\t 
 
    \t </div><!-- footer --> 
 

 
\t \t 
 
\t </div> 
 
</div> 
 

 
<div data-role="page" id="page3"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>SHOP</H1> 
 
\t <div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t 
 
    <div data-role="footer" data-position="fixed"> 
 
    
 
    </div><!-- footer --> 
 

 
<div data-role="page" id="page4"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>PHOTOS</H1> 
 
<div data-role="content"> \t 
 
\t \t Content \t \t 
 
</div> 
 

 
\t <div data-role="footer" data-position="fixed"> 
 
    </div><!-- footer --> 
 

 

 
<div data-role="page" id="page5"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>JOIN US</H1> 
 
<div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t 
 
    <div data-role="footer" data-position="fixed"> 
 
    </div><!-- footer --> 
 

 

 
<div data-role="page" id="page6"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>MORE</H1> 
 
\t <div data-role="content"> 
 
\t <ul data-role="listview"> 
 
\t  <li><a href="#">About<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Tickets<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Facebook<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Twitter<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Instagram<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Email<span class="ui-li-count"></span></a></li> 
 
     </ul> \t 
 
\t \t \t \t 
 
\t </div> 
 
\t \t 
 
     <div data-role="footer" data-position="fixed"> 
 
\t \t </div><!-- footer --> 
 
     
 
</body> 
 
</html>

ответ

0

Был несколько перекрывающихся и незакрытые теги. Кроме того, не используйте устаревшие библиотеки jquery, если это возможно. Может быть что-то, как это должно помочь:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>jQuery Mobile Web App</title> 
 
    <!-- link href="../jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> 
 
\t <script src="../jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script> 
 
\t <script src="../jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script --> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div data-role="page" id="page"> 
 
\t <div data-role="header"> 
 
     <div data-role="headerimg"> 
 
     <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt="" /> 
 
     </div> 
 
\t </div> 
 
     <div data-role="content"> 
 
     <a href="#page" data-role="button" >Home</a> 
 
     <a href="#page2" data-role="button" data-icon="plus">Tickets</a> 
 
     <a href="#page3" data-role="button" data-icon="plus">Shop</a> 
 
     <a href="#page4" data-role="button" data-icon="plus">Photos</a> 
 
     <a href="#page5" data-role="button" data-icon="plus">Join Us</a> 
 
     <a href="#page6" data-role="button" data-icon="plus">More</a> 
 
\t </div> 
 
     <!-- footer --> 
 
     <div data-role="footer" data-position="fixed" data-id="mainFooter"><h1>Footer p1</h1></div> 
 
     <!-- footer --> 
 
    </div> 
 
    <div data-role="page" id="page2"> 
 
     <div data-role="header" data-add-back-btn="true"> 
 
     <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt="" /> 
 
\t \t <h1>TICKETS</h1> 
 
     </div> 
 
     
 
     <div data-role="content">Content</div> 
 
     <div data-role="footer" data-position="fixed" data-id="mainFooter" ><h1>Footer p2</h1></div> 
 
     <!-- footer --> 
 
    </div> 
 
    <div data-role="page" id="page3"> 
 
     <div data-role="header" data-add-back-btn="true"> 
 
     <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt="" /> 
 
     <h1>SHOP</h1> 
 
     </div> 
 
     <div data-role="content">Content</div> 
 
     <div data-role="footer" data-position="fixed"><h1>Footer p3</h1></div> 
 
     <!-- footer --> 
 
    </div> 
 
    <div data-role="page" id="page4"> 
 
     <div data-role="header" data-add-back-btn="true"> 
 
     <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt="" /> 
 
     <h1>PHOTOS</h1> 
 
     </div> 
 
     <div data-role="content">Content</div> 
 
     <div data-role="footer" data-position="fixed"><h1>Footer p4</h1></div> 
 
     <!-- footer --> 
 
    </div> 
 
    <div data-role="page" id="page5"> 
 
     <div data-role="header" data-add-back-btn="true"> 
 
     <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt="" /> 
 
     <h1>JOIN US</h1> 
 
     </div> 
 
     <div data-role="content">Content</div> 
 
     <div data-role="footer" data-position="fixed"><h1>Footer p5</h1></div> 
 
     <!-- footer --> 
 
    </div> 
 
    <div data-role="page" id="page6"> 
 
     <div data-role="header" data-add-back-btn="true"> 
 
     <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt="" /> 
 
     <h1>MORE</h1> 
 
     </div> 
 
     <div data-role="content"> 
 
     <ul data-role="listview"> 
 
      <li> 
 
      <a href="#">About</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Tickets</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Facebook</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Twitter</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Instagram</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Email</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    <div data-role="footer" data-position="fixed" ><h1>Footer p6</h1></div> 
 
\t </div> 
 
     <!-- footer --> 
 
    
 
    </body> 
 
</html>

0

Вы пропустили много </div> tag.Corrected версия кода выглядит следующим образом:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>jQuery Mobile Web App</title> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
<div data-role="page" id="page"> 
 
\t <div data-role="headerimg"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
\t </div> 
 
    
 
    <div data-role="content"> 
 
    
 
    \t 
 
    <a href="#page" data-role="button" data-icon="plus">Home</a> 
 
    <a href="#page2" data-role="button" data-icon="plus">Tickets</a> 
 
\t <a href="#page3" data-role="button" data-icon="plus">Shop</a> 
 
\t <a href="#page4" data-role="button" data-icon="plus">Photos</a> 
 
    <a href="#page5" data-role="button" data-icon="plus">Join Us</a> 
 
\t <a href="#page6" data-role="button" data-icon="plus">More</a> 
 
\t 
 
    </div><!-- footer --> 
 
\t </div> 
 

 
<div data-role="page" id="page2"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
\t \t <H1>TICKETS</H1> 
 
\t </div> 
 
    
 
\t <div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t \t <div data-role="footer" data-position="fixed"> 
 
\t 
 
    \t </div><!-- footer --> 
 

 
\t \t 
 
\t </div> 
 

 

 
<div data-role="page" id="page3"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>SHOP</H1> 
 
\t \t </div> 
 
\t <div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t 
 
    <div data-role="footer" data-position="fixed"> 
 
    
 
    </div><!-- footer --> 
 
\t </div> 
 

 
<div data-role="page" id="page4"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>PHOTOS</H1> 
 
\t \t </div> 
 
<div data-role="content"> \t 
 
\t \t Content \t \t 
 
</div> 
 

 
\t <div data-role="footer" data-position="fixed"> 
 
    </div><!-- footer --> 
 
\t </div> 
 

 

 
<div data-role="page" id="page5"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>JOIN US</H1> 
 
\t \t </div> 
 
<div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t 
 
    <div data-role="footer" data-position="fixed"> 
 
    </div><!-- footer --> 
 
</div> 
 

 
<div data-role="page" id="page6"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>MORE</H1> 
 
\t \t </div> 
 
\t <div data-role="content"> 
 
\t <ul data-role="listview"> 
 
\t  <li><a href="#">About<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Tickets<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Facebook<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Twitter<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Instagram<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Email<span class="ui-li-count"></span></a></li> 
 
     </ul> \t 
 
\t \t \t \t 
 
\t </div> 
 
\t \t 
 
     <div data-role="footer" data-position="fixed"> 
 
\t \t </div><!-- footer --> 
 
     </div> 
 
</body> 
 
</html>

0

Попробуйте это раз

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>jQuery Mobile Web App</title> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
<div data-role="page" id="page"> 
 
\t <div data-role="headerimg"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
\t </div> 
 
    
 
    <div data-role="content"> 
 
    
 
    \t 
 
    <a href="#page" data-role="button" data-icon="plus">Home</a> 
 
    <a href="#page2" data-role="button" data-icon="plus">Tickets</a> 
 
\t <a href="#page3" data-role="button" data-icon="plus">Shop</a> 
 
\t <a href="#page4" data-role="button" data-icon="plus">Photos</a> 
 
    <a href="#page5" data-role="button" data-icon="plus">Join Us</a> 
 
\t <a href="#page6" data-role="button" data-icon="plus">More</a> 
 
\t 
 
    </div><!-- footer --> 
 
\t </div> 
 

 
<div data-role="page" id="page2"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
\t \t <H1>TICKETS</H1> 
 
\t </div> 
 
    
 
\t <div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t \t <div data-role="footer" data-position="fixed"> 
 
\t 
 
    \t </div><!-- footer --> 
 

 
\t \t 
 
\t </div> 
 

 

 
<div data-role="page" id="page3"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>SHOP</H1> 
 
\t \t </div> 
 
\t <div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t 
 
    <div data-role="footer" data-position="fixed"> 
 
    
 
    </div><!-- footer --> 
 
\t </div> 
 

 
<div data-role="page" id="page4"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>PHOTOS</H1> 
 
\t \t </div> 
 
<div data-role="content"> \t 
 
\t \t Content \t \t 
 
</div> 
 

 
\t <div data-role="footer" data-position="fixed"> 
 
    </div><!-- footer --> 
 
\t </div> 
 

 

 
<div data-role="page" id="page5"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>JOIN US</H1> 
 
\t \t </div> 
 
<div data-role="content"> \t 
 
\t \t Content \t \t 
 
\t </div> 
 
\t 
 
    <div data-role="footer" data-position="fixed"> 
 
    </div><!-- footer --> 
 
</div> 
 

 
<div data-role="page" id="page6"> 
 
\t <div data-role="header"> 
 
\t \t <img src="../images/SoulTrainHeaderNew.jpg" width="100%" height="80" alt=""/> 
 
     <H1>MORE</H1> 
 
\t \t </div> 
 
\t <div data-role="content"> 
 
\t <ul data-role="listview"> 
 
\t  <li><a href="#">About<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Tickets<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Facebook<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Twitter<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Instagram<span class="ui-li-count"></span></a></li> 
 
\t  <li><a href="#">Email<span class="ui-li-count"></span></a></li> 
 
     </ul> \t 
 
\t \t \t \t 
 
\t </div> 
 
\t \t 
 
     <div data-role="footer" data-position="fixed"> 
 
\t \t </div><!-- footer --> 
 
     </div> 
 
</body> 
 
</html>

0

извиняется, я загрузил неправильный текст HTML.

К сожалению,

Смежные вопросы