Question

I’m creating a jQuery Mobile web application.

This link, works correctly:

<a href="/ThePage/25" data-transition="slidedown">Click Here 1</a><!--This is working-->

But, these links which have anchors are not working:

<a href="/ThePage/25#3" data-transition="slidedown">Click Here 2</a><!--This is not working-->
<a href="/ThePage/25/#3" data-transition="slidedown">Click Here 3</a><!--This is not working-->

How to make those links that have # work with ajax navigation?

Edit: The page, which contains these links, contains some links to different articles. And /ThePage/25 contains the full text of that articles. I want each link to go to somewhere inside /ThePage/25. So I’ve used #. (#3 means the third article in the page)… Do you know any better way?

Edit 2: I’m simply trying to load/show a page and then jump within it…

Edit 3: My jump inside that page isn’t a simple jumping. It’s a custom handled jumping with hashchange event. But if there is any other method, I can change that page…

Answer 1

You can try using this from JS like this , I had problems with # tags :

<a class='homeSet'>Home</a>

….

 $('body').on('click', '.homeSet', function(ev) {
    $.mobile.changePage('/home.html#myhome', {
        transition : "slide"
    });
    return false;
    });