求助：jQuery Mobile第二页面样式无法加载问题

这个问题的核心原因是jQuery Mobile默认的AJAX导航机制在捣鬼！

JQM为了实现流畅的移动端页面切换效果，默认会用AJAX处理所有链接的跳转请求——它不会让浏览器做完整的页面刷新，而是偷偷加载目标页面的内容，然后把内容插入到当前JQM页面的DOM结构中。但你的PC端index.php是没有用JQM开发的，AJAX加载时只会提取页面的主体内容，不会加载index.php里的CSS、JS资源，也不会替换整个页面的结构，自然就会出现样式混乱、看起来像“样式没加载”的情况。

下面是几个针对性的解决方案：

• 给Logout链接禁用AJAX跳转（推荐）
  只需要给你的Logout锚点标签添加data-ajax="false"属性，告诉JQM这个链接要走普通的页面跳转流程，让浏览器完整加载目标页面的所有资源：

  <a href="../index.php" data-ajax="false">Logout</a>
  

  这个方法只影响单个链接，不会破坏移动端内部页面的AJAX切换体验。

• 全局禁用AJAX导航（仅当所有跳转都不需要AJAX时使用）
  如果你移动端的所有链接都需要跳转到非JQM页面，可以全局关闭JQM的AJAX功能。注意要把这段代码放在引入jQuery之后、引入jQuery Mobile之前：

  $(document).on("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
  });
  

• 检查目标页面的资源路径
  额外提醒一下：如果index.php里的样式用的是相对路径，比如css/style.css，跳转后浏览器会从根目录（mywebsite/）解析这个路径，这部分应该是正常的，但如果路径写的是./css/style.css（从当前目录出发），那跳转后可能会出问题，不过这个情况比较少见，优先排查前两个方案。

内容的提问来源于stack exchange，提问作者Kumar Kush