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 trialKyle Rooker
5,243 PointsIf 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
231,236 PointsGood trick!
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
231,236 PointsHere'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
20,981 PointsKyle, 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'
Johnny Ariza
Front End Web Development Techdegree Student 11,525 PointsHey Guys,
I'm having the same problem, could you please any of you show me exactly how did you fix it?
Johnny Ariza
Front End Web Development Techdegree Student 11,525 PointsSteven, very simple and effective! Thank you,