CODEWITHSUNDEEP
htmlhyperlink
digi_life
digi_life

Reputation: 109

Why are my html links not working?

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"><a href="index.html">Home</a></li>
        <li><a href="index.html#targetabout">About Us</a></li>
        <li><a href="index.html#targetservices">Services </a></li>
        <li><a href="index.html#targetcontact">Contact</a></li>
     </ul>
 </nav>

```

Upvotes: 1

Views: 3657

Answers (4)

Johannes
Johannes

Reputation: 67768

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

Upvotes: 2

kklepper
kklepper

Reputation: 813

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>

Upvotes: -1

Tanner Babcock
Tanner Babcock

Reputation: 3350

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"><a href="index.html">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></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.

Upvotes: -1

Daniel Tran
Daniel Tran

Reputation: 6171

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:

<a href="#about-section">About</a>

And:

<section id="about-section">...

Upvotes: 3

Related Questions