这个根据教科书使用一样的库文件竟然还出现了问题，以后代码出现问题。编译器检查正确后，考虑这个因素
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习5</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-2.1.4.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="navbar">
<ul>
<li><a href="#" class="ui-btn-active">德鲁伊</a></li>
<!--data-icon设置图片的样式，api里面有几十种，自己选择。同时，这里也可以引用自定义的图片-->
<li><a href="#">法师</a></li>
<li><a href="#">猎人</a></li>
<li><a href="#">术士</a></li>
</ul>
</div>
<br/><br/>
<!--设置导航按钮-->
<br/><br/>
<div data-role="header" data-theme="b">
<!--设置导航的整个主题-->
<h2>头部导航</h2>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="action">德鲁伊</a></li>
<!--data-icon设置图片的样式，api里面有几十种，自己选择。同时，这里也可以引用自定义的图片-->
<li><a href="#" data-icon="bars">法师</a></li>
<li><a href="#" data-icon="camera">猎人</a></li>
<li><a href="#" data-icon="cloud">术士</a></li>
</ul>
</div>
</div>
<br/><br/>
<!--上面写的导航栏，下面弹出窗口-->
<a href="#popupId" data-rel="popup" class="ui-btn">点我，弹出</a>
<div data-role="popup" id="popupId">
<h1>老哥，我就是弹出的窗口</h1>
</div>
<br/><br/>
<a href="#popupId2" data-rel="popup" data-position-to="window" data-transition="fade">
<!--打开方式以window打开，转换效果按照fade效果-->
<img src="11.jpg" class="popupImg" style="width: 10%">
<!--只需设置宽度的百分比，即为图片的百分比-->
</a>
<div data-role="popup" id="popupId2">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b
ui-icon-dalete ui-btn-icon-notext ui-btn-right">关闭</a>
<!--放大的关闭按钮，设置他的属性-->
<img src="11.jpg" class="popupImg" style="max-height: 600px;">
</div>
</body>
</html>效果：
