Applying Styles to Current Page Link: 2 Ways

Programmers

currentPageChanging the look of the currently open link is a common enough occurrence in web page design. I’ll take you through two ways to create this effect: using pure jQuery and in Business Catalyst.

Using Pure jQuery

If you’re creating a website from scratch, this is an easy way to manipulate the currently open link.

var pathname = window.location.pathname;
pathname = pathname.split("/");

//option one
$('#linksMain a').each(function(){
if (pathname[2] == $(this).attr('href')){
$(this).addClass('active');
}
});

The walk-through

Line1. We grab the path name, minus the domain name.

Line 2. We split the path name we just got and put each section, separated by a forward slash, into an “array”.

OPTION 1 – If all your links are 1st generation, as in http://domain.com/gen1, this works well, if not, skip down to OPTION 2.

Line 3. Reference the Div that your links are a part of (ie. linksMain), and reference each link within that div using the “a” tag. Then cycle through the links within that Div using the jQuery “.each” cycle.

Line 4. Match the second item in the array with each link’s “href”.

Line 5. If they match, add the “active” class to this link.

//option two
$.each( pathname, function( key, value ) {
if (value == 'products'){
$('#nav_1410377 a[href$="products"]').parent().addClass('selected');
}
if (value == 'Blog'){
$('#nav_1410377 a[href$="_blog/Blog"]').parent().addClass('selected');
}
});

OPTION TWO

This option is good if your links have multiple generations: http://domain.com/gen1/gen2

Line 1. We cycle through that “array” by using the jQuery “$.each”. As a result, the values end up being split up like this:

array{1=firstOne, 2=secondOne}      <— Original Array

key = 1, value = firstOne; key = 2, value = secondOne     <— Within our “$.each” cycle

Line 2. Because our values is what we’ll be checking, we’ll use the “if” statement to see if this is what we’re looking for. I didn’t cycle through all options, just two here.

Line 3 & 6: If the current page (value) is products/blog, then we match the link within the Div (#nav_1410377), and apply the class. Here I added another option – I added the class to the parent Div, while in option One I just added it to the actual link. If each of your links are inside of individual divs, you’ll probably want to use this route.

Business Catalyst

Business catalyst has a built-in method of telling the current link. Whenever a link is selected (first generation), a class of “.selected” is added to the link.

Because of this built-in method, it also becomes easy to add additional things. For example, if you wanted to add Divs to the current link, you could add them using the jQuery below.

//ADDING stuff to current link
$('#navigation .selected').append('<div class="orangeBtn">').append('<div class="pawprint">');

First I referenced the Div id (‘navigation’) and then the class (‘selected’) and used the jQuery “append” to add Div classes directly after the link.

Summary

The idea behind this concept is fairly simple, and hopefully using the code (and variations) provided here, you’ll be able to easily accomplish what you’re looking for.

Comments