jquery - Pure CSS alter selection -

i have 3 section page. each div ( section ) has it's own unique id has 2 forms of nav: arrows , buttons ( share same id's , jquery ). when on particular section, url changes name of id associated w/ div. pretty standard.

<div class="nav-buttons-wrap">     <a href="#welcome" class="nav-buttons"></a>     <a href="#we-are-the-leader" class="nav-buttons"></a>     <a href="#services" class="nav-buttons"></a> </div>  <a href="#we-are-the-leader" class="down">     <i class="fa fa-angle-down"></i> </a>  <!-- section 1 --> <div id="#welcome"></div> <!-- section 2 --> <div id="#we-are-the-leader"></div> <!-- section 3 --> <div id="#services"></div>  <script> jquery(function($) {     $(document).ready(function(){         $('a[href^="#"]').on('click',function (e) {             e.preventdefault();              var target = this.hash,             $target = $(target);              var navbarheight = 0; // change if nav bar height changes             $('html, body').stop().animate({                 'scrolltop': ($target.offset().top - navbarheight)             }, 1000, 'easeinoutquint', function () {                 window.location.hash = target;             });         });     }); }); </script> 

this working fine, want .nav-buttons change color according id in url, in other words, if on section associated w/ specific id. if on section 2, second button different color other two.

i'm not enough @ jquery figure out clean way add class 'selected' button , know 1 option open kind of solution ideally love know if there pure css way this. not find one.

one way accomplish listen hashchange event on window. checkout working example on plunker. the code can found on plunker.

the key part this:

$(window).on("hashchange", function() {   $(".nav-buttons-wrap a").removeclass("selected");   $(".nav-buttons-wrap a[href='" + window.location.hash + "']").addclass("selected"); });