CODEWITHSUNDEEP
javascriptnavigation
Sabine Quardon
Sabine Quardon

Reputation: 207

Javascript Active link on ONE html5 page

I'm making a navigation with scrolling content. I came so far that everytime I "click" a link, it shows the "active" way. But my problem now is, that the first link, "om" should be active when you enter the index.html file.

I've got this script:

<script type="text/javascript">
$(function() {
    $('a.anchorLink').click(function(e) {
        var $this = $(this);
        $("#nav").load($this.attr('href'));
        $('a.anchorLink').removeClass('active');
        $(this).addClass('active');

        // prevent default link click
        e.preventDefault();
    })
});</script>

And then a navigation:

<nav>
    <ul class="navig">
        <li id="om1"><a class="anchorLink" href="#om"></a></li>
        <li id="cv1"><a class="anchorLink" href="#cv"></a></li>
        <li id="video1"><a class="anchorLink" href="#video"></a></li>
        <li id="kontakt1"><a class="anchorLink" href="#kontakt"></a></li>
    </ul>               
</nav>

Each navigation links to a section in the content. To see the whole page click here

Upvotes: 0

Views: 1388

Answers (1)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

$(document).ready(function(){
    $('#om1 a.anchorLink').addClass('active');
});

or you might even hard-code the class active for the first link, as it will be removed as soon as you click one of the other links.

This part is way more trivial than the rest of your code - may I ask what has been your problem to solve that? What had you tried before that didn't work?

Upvotes: 1

Related Questions