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...

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...

• javascript
• jquery
• jquery-mobile
• hyperlink
• anchor

• Why dont you do it from javascript? I feel thats a better and cleaner approach.. I had issues with # tags. – Suave Nti Commented Sep 4, 2012 at 19:06
• @SJGJ I have no idea about how I can do it from javascript. Can you make an example? – Mahdi Ghiasi Commented Sep 4, 2012 at 19:07

2 Answers 2

add rel="external" to any links that have an anchor # and you don't want to load via ajax.

New Links would be:

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

See http://jquerymobile./demos/1.1.1/docs/pages/page-links.html for more detail.

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;
    });