9/26/2016 - 9:17 PM

Highlight Tab: Version 2

Highlight Tab: Version 2

# In the page front matter we set the page id:

layout: default
title: Our artists
id: artists
// And finally a bit of jQuery to set the active link:

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
  $("a[data-page-id='" + currentPage + "']").addClass("active");
My approach is to define a custom variable in the YAML front matter of the page and output this on the <body> element:

<body{% if %} data-current-page="{{ }}"{% endif %}>

My navigation links include the identifier of the page that they link to:

    <li><a href="artists.html" data-page-id="artists">artists</a></li>
    <li><a href="#" data-page-id="contact">contact</a></li>
    <li><a href="#" data-page-id="about">about</a></li>