Why are my html links not working? - html

Question

I am trying to link my mobile menu to different sections on the homepage. It is a one page website. The links are not working. What is wrong with my mobile menu code? Thanks!
```
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services </li>
<li>Contact</li>
</ul>
</nav>
```

Answer 1

You need to remove index.html in your href or it will reload the page.
Set id for the element you want to link to:
About
And:
<section id="about-section">...

Answer 2

If everything is on one page, you can omit the page name in the link, i.e. just use
<a href="#targetabout">
instead of
<a href="index.html#targetabout">
Note: If (just in case) the linked element has the ID #about, don't use #targetabout, but just #about, like <a href="#about">

Answer 3

Don't include the "index.html" in the href in your links, or it will reload the page. It should just be <a href="#about">, <a href="#services">, etc. I'm not sure why you prefaced them with "target", that's not necessary. These should all correspond to <a name> tags, in the body of the page. Since this is a one-page website, and that <nav> only appears once, you don't need to keep linking to index.html.
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<a name="about"><h2>About Us</h2></a>
<!-- your page here -->
<a name="services"><h2>Services</h2></a>
<!-- and so on.... -->
<a name="contact"><h2>Contact</h2></a>
These <a> tags, with no href and only a name, do not visually affect their contents in any way. It's just a sort of "bookmark", to specify where on the page to jump to. For instance, you can't click on them, and they don't appear any different than regular text. You could use this, and it would work (and look) exactly the same.
<a name="about"></a> <h2>About Us</h2>
<a name="services"></a> <h2>Services</h2>
This technique also works with jumping up to the top of a page, as well as jumping down.

Answer 4

It is a bit late, but....
If you use jQuery mobile, this is expected behaviour (see mobile documentation). So you have to scroll to the section yourself:
<script language="JavaScript" type="text/javascript">
function getAnchor() {
return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}
function scrollTo(hash) {
if (hash){
location.hash = "#" + hash;
}
}
scrollTo(getAnchor());
</script>