CODEWITHSUNDEEP
javascripthtml
Tiffany M.
Tiffany M.

Reputation: 40

Hash link disables relative link in HTML

I'm building a webapp that basically its an one-page webapp so to link to another part of the app is like this:

<a href="#internet"></a>

This is possible because I used JavaScript that contains animations and different stuff, the problem is that somehow, this method disables the possibility to link like this:

<a href="internet/index.html"></a>

How can I have both links, without disabling the hash links?

EDIT: To be honest I dont know which part of the js its causing this behaviour because I took a template, but here is the js:

https://github.com/gomobile/template-list-view/blob/master/www/lib/appframework/appframework.ui.min.js

Upvotes: 0

Views: 336

Answers (1)

lucian.nicolaescu
lucian.nicolaescu

Reputation: 647

I believe you have a code like this

$('a').on('click', function(e) {
  e.preventDefault();
});

You need to have an if like 

if ($(this).attr('href').indexOf('#') == 0) {
   e.preventDefault();
}

OR better change the selector to:

$("a[href^=#]").on('click', function(e) {
    e.preventDefault();
    // your animation here.
});

This code will just apply to anchor elements that have the href starting with #

------- update --------

You added a minified js :). If you don't have the problem in your code, you can fix it with a hack like this:

$('a:not([href^=#])').on('click', function(e) {
    window.location.href = $(this).attr('href');
});

But you should really find the issue, not fix it like this :)

Upvotes: 2

Related Questions