单击URL或Href时获取Jquery移动脚本错误(**错误加载页面**)?

时间:2011-12-19 10:09:44

标签: html5 jquery-mobile

我使用jQuery Mobile创建了一个示例Web应用程序。

我创建了两个<div> s;一个包含 href ,另一个包含内容。当我点击HREF它显示jquery-mobile脚本错误如下所示:

加载页面时出错

有人可以看到可能导致此错误的原因吗?

    <html> <head runat="server">    <title>How to expand collapse div layer using jQuery</title>
           <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />    
   <script language="javascript">
       $(document).ready(function () {
       var $pages = $('#pages > *').hide(); 
           $('#content a').click(function() {
                $pages.hide();
                $($(this).attr('href') ).show();
            });
       });
   </script>
</head>
<body>  
   <div data-role="page">
   <div data-role="header" class='header_align'>Bristol-Myers Squibb</div>

       <h2>
           How to expand collapse div layer using jQuery</h2>
       <div id="toggle">
           <div id="heading">Heading</div>
           <div id="content">
              <ul>
                 <li><a href="#page-1">Page1</a></li>
                 <li><a href="#page-2">Page2</a></li>
                 <li><a href="#page-3">Page3</a></li>
              </ul>
           </div>
       </div>
       <div id="pages">
            <div id="page-1">Page 1 Content</div>
            <div id="page-2">Page 2 Content</div>
            <div id="page-3">Page 3 Content</div>
       </div>
     </div>    
</body>
</html>

1 个答案:

答案 0 :(得分:1)

具有命名锚点的链接的jQuery移动默认行为是跳转到具有相应id的页面(data-role =“page”)。但是第1页,第2页或第3页没有这样的页面,因此发生错误。

试试这个

$(document).ready(function () {
    var $pages = $('#pages > *').hide(); 
    $('#content a').click(function() {
        $pages.hide();
        $($(this).attr('href') ).show();
        return false;
    });
});