Check out the codepen: http://codepen.io/tristananthonymyers/full/BRPmKa/
The goal is to have the ".active-link:after" style applied only to the clicked link and show the corresponding page like "#about-page". However, the issue is that the "#about-page" is showing but all links have the ".active-link:after" style applied to them.
While I may not be an expert in Jquery, I feel confident with HTML and CSS.
HTML:
<div class="header">
<p class="placeholder-logo logo">Tristan Myers</p>
<p class="placeholder-logo-text logo">Front-end Web Developer/Designer</p>
</div>
<div class="nav-links">
<a class="nav-link" href="#" id="about-link">About Me</a>
<a class="nav-link" href="#" id="work-link">My Work</a>
<a class="nav-link" href="#" id="contact-link">Contact Me</a></div>
<div class="page" id="about-page">
<p>this is about page.</p>
</div>
<div class="page" id="work-page">
<p>this is work page.</p>
</div>
<div class="page" id="contact-page">
<p>this is contact page.</p>
</div>
CSS:
.show {
visibility: visible;
}
.active-link:after {
background: white;
width: 100%;
height: 1px;
}
JQUERY:
var navLink = $('.nav-link')
var aboutLink = $('#about-link');
var workLink = $('#work-link');
var contactLink = $('#contact-link');
var aboutPage = $('#about-page');
var workPage = $('#work-page');
var contactPage = $('#contact-page');
navLink.click(function togglePage(about, work, contact) {
toggleAboutPage(about);
toggleWorkPage(work);
toggleContactPage(contact);
return false;
});
function toggleAboutPage() {
aboutPage.toggleClass('show');
aboutLink.toggleClass('active-link');
};
function toggleWorkPage() {
workPage.toggleClass('show');
workLink.toggleClass('active-link');
};
function toggleContactPage() {
contactPage.toggleClass('show');
contactLink.toggleClass('active-link');
};