Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Introducing jQuery Plugins Exploring Plugin Options

Kyle Rooker
Kyle Rooker
5,243 Points
Posted by Kyle Rooker
Kyle Rooker
5,243 Points

If you click the link for the page you're already on the page animates and goes blank

I noticed that if you, say, are on the home page and click the href=# link to the home page again the screen will animate out but will never animate back in. I found this in the solution as well. I wasn't sure how to fix it, but i added a:not([href=#]) to the linkElement and it works by just ignoring calling the function.

5 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Good trick! :+1:

It's also common to remove or disable the "self-link" on each page, leaving the text or label visible but clicking on it will do nothing.

Also, I haven't tried this myself, but instead of an internal anchor, if you were to put the URL of the page in the link I'm guessing it would animate out and then back in.

Personally I prefer the "do nothing if you're already there" approaches.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Here's an example of the first technique I mentioned:

If this is the original HTML:

<nav>
  <a href="#" class="active">Home</a>
  <a href="work.html">Work</a>
  <a href="team.html">Team</a>
</nav>

You could remove the link from the item that represents the current page, but still keep the style in case it produces a desired appearance like this:

<nav>
  <span class="active">Home</span>  <!-- only this line changes -->
  <a href="work.html">Work</a>
  <a href="team.html">Team</a>
</nav>

If the style was not important, you would not need the span tags at all.

Nate Jonah
Nate Jonah
20,981 Points
Nate Jonah
Nate Jonah
20,981 Points

Kyle, I tried using your solution of a:not([href=#]) but for some reason, that breaks the outClass property so fading in would work fine but fading out wouldn't. I saw something in the documentation that's very slightly different to what you put and it works perfectly:

linkElement: 'header a:not([href^="#"])', // meaning any links except ones that start with a #
inClass: 'fade-in-left-lg',
outClass: 'fade-out-right-lg'