CODEWITHSUNDEEP
javascripthtmlhashbase-tag
brad
brad

Reputation: 75414

Url Hash with Html Base Tag

window.location.hash

When using a link for a javascript action, I usually do something like this:

<a href="#">Link Text</a>

That way, when someone clicks the link before the page loads nothing terrible happens.

Html Base Tag

On my current project I use this same construct, but with a base tag:

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="#">Link Text</a>
</body>
</html>

However, if the page url is:

http://example.com/dir/page

clicking the link navigates to

http://example.com/#

rather than

http://example.com/dir/page#

How can I fix this?

Upvotes: 13

Views: 7875

Answers (7)

WebDeg Brian
WebDeg Brian

Reputation: 832

You can just simply remove href attribute from your <a> tag.

<a href="#"> => <a>

Upvotes: -1

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

I had the same issue in the past.
I had a link that i wanted to be empty, to link to the current page.
Without the base html element this will be just an a element with href="#".

My example without using the base html element, 

<li>
    <a href="#"><div>The text of my Link</div></a>
</li>

The same example with the solution i found,

<li style="cursor: pointer !important;">
    <a href="#" style="pointer-events: none;"><div>The text of my Link</div></a>
</li>

This solution only uses css to disable the link.

With the first css rule cursor: pointer !important; i ensure that this link will have the correct (for my case) pointer icon.
With the second rule pointer-events: none; i ensure that this link will not be clickable.
You can find more about this rule following this link.

Upvotes: 0

xhdix
xhdix

Reputation: 155

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="./dir/page#">Link Text</a>
</body>
</html>

Upvotes: 0

Adam
Adam

Reputation: 1477

If you're inclined to use an a tag another solution is to not use # as the href target (when you don't specify one it causes a jump to the top of the page which I find undesirable). What you can do is:

<a href="javascript:">Some Link that Goes nowhere</a>

Really though, unless you are doing something that requires that to be an a tag a span would be your best bet:

CSS:

.generic_link {
  text-decoration:underline;
}
.generic_link:hover {
  text-decoration:none;
}

HTML:

<span class="generic_link">Something that really isn't a link</span>

Upvotes: 3

Gumbo
Gumbo

Reputation: 655209

Return false on the onclick event to disable the link:

<a href="#" onclick="doSomething(); return false">Link Text</a>

(This is just an example of how you’d do it inline. But try to avoid inline declarations and use techniques of progressive enhancements.)

Upvotes: 0

Gareth
Gareth

Reputation: 138012

If there's no URL that is suitable for a non-javascript user, then don't use an <a>. <a> tags are for links to other pages.

Any visible HTML element can have an onclick and won't have this problem you describe.

Upvotes: 1

Ken Browning
Ken Browning

Reputation: 29091

Either remove your base tag or change your href attributes to be fully qualified. What you are observing is the intended behavior when you mix base with a elements.

Upvotes: 11

Related Questions