keep link active after clicked using same page anchors

问题

Bascally I have a fixed navbar with same page anchors and I'd like to keep the link active after the link has been clicked and taken to that section of the page. This is simple if the links to another page but I can't figure out how to here.

Here's what I've got. I'll just show you guys the first link and section since the solution will most likely be the same for the following links. I haven't written any CSS because I'm not sure how to go about this.

<nav id="navbar" class="navbar">
<div id="navContent" class="areaMargin navContent row">
    <a href="#schedWrapper" class="link btn btn-lg btn-primary col-lg-2 col-md-2 col-sm-2  col-xs-12">Scheduling</a>
</div>
</nav>



<section id="schedWrapper" class="bgWrapper ">
<img class="bgImg" src="images/bg/scheduling-bg.jpg">
<article id="schedContent" class="areaMargin fittext">
    <header class="top">
        <div class="col1"><h1>A New Way<br />To Schedule<br />Everything</h1></div>
        <div class="col2"><img src="images/scheduling-client-group-event.png"></div>
    </header>
    <div class="clearfix"></div>
    <div id="schedBottom">
        <p>One calendar that lets you manage schedules for your team<br />
        and your spots, all in one calendar, with options of sharing your<br />
        own personal schedule, and you can accept and decline<br />
        appointments with any device.</p>
    </div>
</article>

回答1:

Using jQuery you can simply toggle an active class on links:

$('#navContent a').click(function(){
   /* remove class from prior active link*/
   $('.activeLinkClass').removeClass('activeLinkClass');
   /* "this" is current link clicked*/
   $(this).addClass('activeLinkClass');
});

来源：https://stackoverflow.com/questions/20767161/keep-link-active-after-clicked-using-same-page-anchors