编辑您的代码：提交代码

​x
 
1
2
3
<!DOCTYPE html>
4
<html>
5
<head>
6
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
7
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
8
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
9
</head>
10
<body>
11
​
12
<div data-role="page" id="pageone">
13
  <div data-role="header">
14
    <h1>欢迎来到我的主页</h1>
15
    <div data-role="navbar">
16
      <ul>
17
        <li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li>
18
        <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
19
      </ul>
20
    </div>
21
  </div>
22
​
23
  <div data-role="content">
24
    <p>本例设有 ui-btn-active 类，请注意首页按钮时突出显示的（已选）。</p>
25
    <p>如果点击页面二，您会注意到按钮不会突出显示。</p>
26
  </div>
27
​
28
  <div data-role="footer">
29
    <h1>我的页脚</h1>
30
  </div>
31
</div>
32
​
33
<div data-role="page" id="pagetwo">
34
   <div data-role="header">
35
    <h1>欢迎来到我的主页</h1>
36
    <div data-role="navbar">
37
      <ul>
38
        <li><a href="#pageone" data-icon="home">首页</a></li>
39
        <li><a href="#" data-icon="arrow-r">页面二</a></li>
40
      </ul>
41
    </div>
42
  </div>
43
​
44
  <div data-role="content">
45
    <p>本页中没有被预选的按钮（突出显示）。</p>
46
    <p>如需让按钮被选的外观表示当前正在访问页面，请返回导航栏教程，继续向下阅读。</p>
47
  </div>
48
​
49
  <div data-role="footer">
50
    <h1>我的页脚</h1>
51
  </div>
52
</div>
53
​
54
</body>
55
</html>
56
​
57
          

查看结果：

请在上面的文本框中编辑您的代码，然后单击提交按钮测试结果。w3c0.com

W3c0.com 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3c0 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。 当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。 鲁ICP备15022115号