CodePen

HTML

            
              <nav>
  <a href="index.html">home</a>
  <a href="about.html">about</a>
  <a href="secure_iframe.html">secure iframe</a>
  <a href="navigation.html">navigation</a>
  <a href="contact.html">contact</a>
</nav>

<div></div>
            
          
!
via HTML Inspector

CSS

            
              a {
    text-decoration:none;
    font:lighter normal 1em/1.6 'Georgia';
    padding:8px 10px;
    border-radius:6px;
    border:1px solid #222;
}

div {
    margin-top:50px;
    font:normal normal 2em 'Helvetica';
}

.selected {
    background:rgba(0,0,0,0.6);
    color:#f5f5f5;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var pathname = window.location.pathname;
pathname = pathname.substr(pathname.lastIndexOf('/') + 1);

// Nice addition added by CrocoDillan @CSS-TRICKS
$('a[href*="'+pathname+'"]').addClass('selected');

/*

$('div').html('CURRENT PAGE:  ' + pathname);

$('a').each(function() {
    var a = $(this).attr('href');
  
    a = a.substring(0, a.indexOf('.'));
    console.log(a);
  
    if (a == pathname ) {
        //alert('match');
        $(this).addClass('selected');
    }
});

*/
/*
  Link to Chris Coyier's article for the exact situation:
  http://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................