jquery - 如何锚定在jquery中？

Question

我遇到了一个大问题，在我的移动网站上，我有一堆图像使用 #imagelocation 代码链接到不同页面上的相同图像，但在 jQuery Mobile 中你不能使用# 跳转到与当前不同的 HTML 文件上的页面的特定部分，有没有人有办法跳转到 jQuery Mobile 中外部页面的特定部分？谢谢:)

Page1 片段:

<a href="otherpage.html#2"><img src="imagelocation/2.jpg"></a>

第 2 页代码段:

<a rel="external" href="imagelocation/22.jpg">
<img src="imagelocation/2.jpg"><br>
Description<br> <br>
<a name="2"></a>

Answer 1

我知道这有点 hack，但你可以这样做:

• http://jsfiddle.net/hWHFr/2/
• http://jsfiddle.net/hWHFr/3/ (图片之间留出更多空间)

JS

$('.displayImage').click(function() {
    var selectedImage = $(this).attr('id');
    var showImage = selectedImage.split('-');
    var image = showImage[1];

    $('#imageSelected').val(image);
});

$('#image').live('pageshow',function(event, ui){
    var id = $("#imageSelected").val();
    var imagePosition = $('#'+id).position();

    $.mobile.silentScroll(imagePosition.top);
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#image" id="show-image1" class="displayImage">Show Image 1</a></li>
            <li><a href="#image" id="show-image2" class="displayImage">Show Image 2</a></li>
            <li><a href="#image" id="show-image3" class="displayImage">Show Image 3</a></li>            
        </ul>

        <input type="hidden" id="imageSelected" value="image1" />

    </div>
</div>

<div data-role="page" id="image">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#home">Go Home</a></li>           
        </ul>

        <br />
        <br />
        <br />
        <br />
        <br />
        <img src="http://mostelegantflower.com/wp-content/uploads/2011/08/daffodil-elegant-flowers-1-150x150.jpg" id="image1" alt="Angry face" />
        <br />
        <br />
        <br />
        <br />
        <br />
        <img src="http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/Light_Pink_Peonies_Flower_150.jpg" id="image2" alt="Angry face" />
        <br />
        <br />
        <br />
        <br />
        <br />
        <img src="http://www.whats-your-sign.com/images/LilyFlowerMeanings.jpg" id="image3" alt="Angry face" />

    </div>
</div>