CODEWITHSUNDEEP
htmlfirefoxhref
user2592232
user2592232

Reputation: 145

<a href="#..."> link not working

I am trying to create a set of links to specific sections in the page using the <a href="#..."> notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:

<div>
    <p>Contents</p>
    <ul>
        <li><a href="#map">Map</a></li>
        <li><a href="#timing">Timing</a></li>
        <li><a href="#timingdetails">Timing Details</a></li>
    </ul>
</div>

And they should be linking to:

<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>

Links to external webpages work fine. Placing the id="..." feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.

Any idea why this isn't working?

Upvotes: 13

Views: 162578

Answers (10)

BlockchainEnthusiast41
BlockchainEnthusiast41

Reputation: 1

Make sure you're not using preventDefault in javascript

Upvotes: 0

Abraham Izadi
Abraham Izadi

Reputation: 51

In my case The input tag was the problem. I implemented my tabs by input (radio buttons) which was preventing the anchor tag's behaviour.

It was like this at first (not working):

<a href="#name">
  <li>
    <label></label>
    <input></input>
  </li>
</a>

Then I removed the input tag and it worked:

<a href="#name">
  <li>
    <label></label>
    // <input></input> <!-- removed it -->
  </li>
</a>

Upvotes: 0

Pablo Gnesutta
Pablo Gnesutta

Reputation: 51

Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an "issue" today.

Same requirement: links that go to a section of the page. It worked on my desktop's Chrome and Firefox, but not on my client's and neither on my Android's Chrome.

After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:

  • a container with an id, and

  • an anchor with a name property,

The most important part is that the anchor tag with a name, must have content inside of it.

So, you have your links

<a href="#page-section">Go to section</a>
<!-- more links -->

And you have the sections you want your links to go to

<div id="page-section">
    <a name="page-section" class="collapse"> placeholder-content (important) </a>
    <!-- your section content -->
</div>

Since you MUST have content inside the anchor with the name, you can then hide it in several ways. My approach was to just set it's height to 0. In order for the height to be effective, the anchor tag's display property should be set to block or inline-block for example.

.collapse {
    height: 0px;
    overflow: hidden;
    display: block;
}

Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web...), and all the people who answer questions like this and share their knowledge.

Upvotes: 3

Kyubey
Kyubey

Reputation: 41

Just resurrecting this post because I had a similar problem and the reason was something else.

In my case it was because we had:

<base href="http://mywebsite.com/">

defined on the .

Obviously, don't just remove it, because you need it if you are using relative paths.

Read more here: https://www.w3schools.com/tags/tag_base.asp

Upvotes: 3

rohan parab
rohan parab

Reputation: 1777

This might help

JS:

function goto($hashtag){
     document.location = "index.html#" + $hashtag;
}

HTML :

<li><a onclick="goto('aboutus')">ABOUT</a></li>

Upvotes: 0

Basheer AL-MOMANI
Basheer AL-MOMANI

Reputation: 15327

what happened with me is that the href does not work second time and that because I should Remove hash value first,,

take look how I resolved it 

<a href="#1" onclick="resetHref();">go to Content 1</a>

function resetHref() {
    location.hash = '';
}

Upvotes: 4

user3315171
user3315171

Reputation: 5

Here is something that I finally got to work in IE, Chrome and Firefox.

Around any text create an anchor tag like this:

<a class="anchor" id="X" name="X">text</a>

Set "X" to whatever you want.

You must enclose something in the anchor tags such as text or an image. It will NOT work without these.

For the link, use this:

<a href="#X">text</a>

As for getting rid of the CSS for links using our anchor tag use something like this:

a.anchor {
color:#000;
text-decoration:none;
}

This seems to work well.

Upvotes: -3

webketje
webketje

Reputation: 10976

Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:

1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:

<a href="#map">Go to Map</a> <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->

Demo: http://jsbin.com/feqeh/3/edit

2.Only use <a> tags with the name attribute as anchors.

This will allow the on-page links to work in all browsers.

Upvotes: 8

Roberto Reale
Roberto Reale

Reputation: 4317

Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,

<a href="#map">Map</a>

<a name="map">[content]</a>

An enclosing div is not necessary, if not used for other purposes.

Upvotes: 9

Natasha
Natasha

Reputation: 39

<a href="#1">Content 1</a>    
<a href="#2">Content 2</a> 
<a href="#3">Content 3</a>
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3

When clicking on "Content 1" it will take directly to "Text here for Content 1. Guaranteed!

Upvotes: 1

Related Questions