Style 'Current' State of CMS Anchor Links (Finsweet)

Hey Everyone,

I’m currently using the following code in my project to create dynamic anchor links for inter-sectional linking. The code itself works great (props to @Finsweet for getting me started) however it lacks one great feature; the ability to style the current state of the current dynamic anchor link. Below is the code:

<script>
// when the DOM is ready
$(document).ready(function() {
	// create an empty array that will store link text strings 
	const linkTextArr = []; 

	// for each filter button
	$('.hack4-filter-button').each((index, link) => {
		// get its text content and reformat to a valid ID
		let linkText = $(link).text().replace(/\W/g,'-').toLowerCase(); 
		// set the reformatted linkText as the link href attribute
  	$(link).attr('href', '#'+linkText);
		// push reformatted linkText to array 
  	linkTextArr.push(linkText);
	});

	// for each section 
  //hellosign > hellosign
  // streak > streak
	$('.hack4-cms-anchor-section').each((index, section) => {
		// set id attribute to linkTextArray value sequentially
  	// 1st section gets id of linkTextArr[0]
    // 2nd section gets id of linkTextArr[1]
    // 3rd section gets id of linkTextArr[2] and so on
  	$(section).attr('id', linkTextArr[index]);
	});
});
</script>

Would anyone know how to add some jquery to this to allow for me to toggle .addClass & .removeClass dynamically? I tried creating based on the current href but had no luck :frowning:

1 Like

@Jhart4595 We’re on it! You’re right. We totally overlooked active classes on this one.

Will come back with a solution within a few days. Thanks for following our content!

1 Like

You and your team are miracle workers :grimacing: this will be very helpful for those who come across this in the future who need to implement sticky anchor links or something along those lines. Thanks man!

@Jhart4595 Hey Josh - here you go. Active classes added to the Hacks build: Loom | Free Screen & Video Recording Software | Loom

Showing live on here:

1 Like

@finsweet wow, this works great. Definitely going to be using this more in the future. Thanks for the much needed help!