jqueryリンクをクリックすると、リンクにスタイルが適用され、要素も表示されますか？

Question

これはcodepenです：http://codepen.io/tristananthonymyers/full/BRPmKa/

私は、リンクをクリックしたときに取得しようとしています「.activeリンク：後に」スタイルが適用され、これまでのリンクをクリックし、約-ページ＃」などの対応するページされています"ショー。問題は "＃about-page"だけであり、すべてのリンクには ".active-link：after"スタイルが適用されます。

私はjQueryを使って経験していないよそれが、私はほとんどそれがHTMLと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'); 
}; 

Answer 1

これは私がそれを行うだろうかです：

$(".nav-link").click(function(){ 
    var index = $(".nav-link").index($(this)); 

    $(".nav-link").removeClass("active-link"); 
    $(this).addClass("active-link"); 

    $(".page").removeClass("show"); 
    $($(".page").get(index)).addClass("show"); 
}); 

Here is the CodePen demo