如何直接在jQuery Mobile中访问带有div id的链接?

时间:2012-10-13 04:27:25

标签: jquery jquery-mobile pageload

假设我有一个链接,比如http://www.example.com/index.html#xyz。当我在浏览器中使用www.example.com/index.html打开它时效果很好,但是当我在同一页面上有一个定位#xyz的链接时,它会通过ajax加载一个新的data-role=content页面。

现在我的查询是,如果我直接访问与http://www.example.com/index.html#xyz相同的网址,则会加载www.example.com/index.html而不是特定的#xyz页面。

有没有办法让这项工作?

注意:#xyz页面内容是动态加载的。

1 个答案:

答案 0 :(得分:0)

您可以尝试将rel="external"添加到您的链接,然后就可以了。

示例:

假设您有2个HTML文件:index.htmlpage.htmlpage.html包含2个jQuery Mobile网页:#p1#p2。< / p>

现在,假设您想通过点击链接#p2index.html访问<a>

您需要在链接中添加rel="external",如下所示:

<a href="page.html#p2" rel="external">GO TO PAGE 2 !</a>

完整示例:

index.html

<!DOCTYPE html>
<html>
<head>    
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

</script>
</head>    

<body>

<div data-role="page">      
  <div data-role="content">      
    <h1>INDEX.HTML</h1>

    <!-- YOUR LINK TO ACCESS #P2 IN PAGE.HTML -->
    <a href="page.html#p2" rel="external">GO TO PAGE 2 "#P2" !</a>    
  </div>    
</div>

</body>
</html>

page.html

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>    

<body>

    <!-- PAGE 1 #P1 -->
    <div data-role="page" id="p1">    
        <div data-role="content">
    <h1>PAGE 1</h1>
        </div>
    </div>

    <!-- PAGE 2 #P2 -->
    <div data-role="page" id="p2">
        <div data-role="content">
        <h1>PAGE 2</h1>
        </div>
    </div>
</body>

</html>