<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:<a href="#..."> link not working

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

來源

2014-04-25 user2592232

http://jsbin.com/peqase/ 1/edit？html，css，output - 我無法在Chrome 55或Firefox 50中重現此問題。 – Quentin

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.

來源

2014-04-25 00:17:19

即使HTML 4.01已允許具有'id'的元素用作錨定目標，http：//www.w3 .org/TR/html401/struct/links.html＃h-12.2.3 – CBroe

對我來說，這是在Android上正常工作，但不是在iphone6上safai，可以som ebody help - http://stackoverflow.com/questions/35124950/does-the-hash-navigation-on-iphone-works-properly – vipin8169

-1

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

來源

2014-04-25 00:33:34 Natasha

非常非常不好的例子和練習使用數字作爲任何名稱/ ID /類值。 – Tyblitz

另外，我在谷歌瀏覽器上測試了這個例子，它只適用於你的目標爲''。順便說一句，謝謝你投票下來我完全有效的測試答案。 – Tyblitz

對我來說這是工作正常在Android上，但不是在iphone6 safai，有人可以幫助 - http://stackoverflow.com/questions/35124950/does-the-hash-navigation-on-iphone-works-properly – vipin8169

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.僅使用<a>標籤與name屬性爲錨。

這將允許頁面鏈接在所有瀏覽器中工作。

來源

2014-04-25 00:50:10 Tyblitz

-2

這是我終於在IE，Chrome和Firefox中工作的東西。

周圍的任何文本創建一個錨標記是這樣的：

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

集「X」爲任何你想要的。

您必須在錨標記中包含某些內容，例如文本或圖像。沒有這些，它就無法工作。

的鏈接，使用此：

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

至於擺脫CSS的使用我們的錨標記使用像這樣的鏈接：

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

這似乎運作良好。

來源

2016-12-14 19:45:42 user3315171

你沒有說來自原始問題的新東西。而且似乎這個問題不能再被重現。所以這不是一個真正的答案。 –

什麼與我發生的事情是，在href does not worksecond time和，因爲我要Remove hash價值首先,,

拿來看我如何解決它

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

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

來源

2017-03-07 16:28:47

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

回答

相關問題