Streaming live at 10am (PST)

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: https://www.loom.com/share/5c9924947b6e48b48f9577038572f5a0

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!