Question

我已经尝试了所有我能想到的东西，但我的页面很奇怪。没有风格或形式，对于我的生活，我不知道为什么！以下是我的代码：附件是运行代码时得到的结果的图片。

<!DOCTYPE html>   
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">    

    <div data-role="header">
        <div class="ui-btn-active" data-role="navbar">
            <ul>
                <li>    
                    <a href="#">Find Us</a>
                </li>
                <li>
                    <a href="#">Call Us</a>
                </li>
            <ul>
        </div>
    </div>
    <div class="ui-content" data-role="main">
        <ul data-filter="true" data-insert="true" data-role="listview">
                <li>
                    <a href="#">Brussels</a>
                </li>
                <li>
                    <a href="#">Dublin</a>
                </li>
                <li>
                    <a href="#">Cape Town</a>
                </li>
        </ul>
    </div>
        <div data-role="footer" style="text-align:centure;">
            <button class="ui-btn ui-icon-plus ui-btn-icon-left">Click
                Me</button>
        </div>
   </div>
 </body>
</html>

Answer 1

这是一个简单的错字。标头导航栏中的第一个<ul>未关闭。不知怎的，jquery-mobile不喜欢这样，并停止渲染错误。您应该在浏览器开发工具中看到此错误。

如果您对jquery和jquery-mobile的引用是正确的。如果您关闭<li>代码

，它应该有效

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="_assets/js/index.js"></script>
<!-- jQuery Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page" data-theme="a">
  <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
  <link rel="stylesheet" href="_assets/css/jqm-demos.css">

  <div data-role="header">
    <div class="ui-btn-active" data-role="navbar">
      <ul>
        <li>
          <a href="#">Find Us</a>
        </li>
        <li>
          <a href="#">Call Us</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="ui-content" data-role="main">
    <ul data-filter="true" data-insert="true" data-role="listview">
      <li>
        <a href="#">Brussels</a>
      </li>
      <li>
        <a href="#">Dublin</a>
      </li>
      <li>
        <a href="#">Cape Town</a>
      </li>
    </ul>
  </div>
  <div data-role="footer" style="text-align:center;">
    <button class="ui-btn ui-icon-plus ui-btn-icon-left">
      Click Me
    </button>
  </div>
</div>

除此之外，您的代码中还有其他错误。

您应该在jquery和jquery-mobile之后插入您的个人javascript代码<script src="_assets/js/index.js"></script>。如果你这样做，你总是确定，在你的“个人”javascript文件中使用它们之前，所有的库都已加载。
无需两次包含相同的CSS文件。就像你做的那样 css/themes/default/jquery.mobile-1.4.5.min.css和_assets/css/jqm-demos.css
在Jquery-mobile中，可以在data-role =“page”容器中包含CSS和/或Javascript文件。但在这种情况下，绝对没有意义。
导航栏ui-btn-active内部不需要课程<div>。如果您要设置导航栏的按钮处于活动状态，则必须在<li>标记
你的页脚里面有一个拼写错误。 centure

jQuery页面没有样式，看起来不正确

1 个答案: