Question

我遇到了一个大问题，在我的移动网站上，我有一堆图像使用#imagelocation代码链接到不同页面上的相同图像，但在jQuery Mobile中你无法使用{{1}要跳转到不同于当前的HTML文件的页面的某个部分，是否有人可以在jQuery Mobile中跳转到外部页面的某个部分？谢谢:)）

Page1摘录：

Page2摘录：

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

Answer 1

我知道这有点像黑客，但你可以这样做：

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>

如何在jquery中锚定？

1 个答案: