Lego2012
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 page.id %} data-current-page="{{ page.id }}"{% endif %}>
<!--
My navigation links include the identifier of the page that they link to:
-->
<nav>
<ul>
<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>
</ul>
</nav>