试图制作一个交互式导航栏，但似乎无法让它工作

Question

我正在网站上工作，我似乎无法让它变得充满活力。我的问题是我无法让导航栏成为交互式。当我点击它时，没有任何反应，但刷新同一页面。

（http://puu.sh/8RkDH.png）＆lt; - 这就是网站使用此HTML，javascript和css：http://pastebin.com/Lz1rDwVj的样子。

我想

<div id="page">
        <div id="header"><h1>FILMSTER</h1></div>
    <div id="nav">
                <a href="#">HOMEPAGE</a>
                <a href="#">DIRECTORS</a>
                <a href="#">MOVIES</a>
                <a href="#">CONTACT</a>
    </div>

    <div id="main">
        <div id="content">
                <div class="tabs-container">

<div class="tab" id="HOMEPAGE"></div>
<div class="tab" id="DIRECTORS">asdfasdf</div>
<div class="tab" id="MOVIES">asdfasdf</div>
<div class="tab" id="CONTACT">gfdsgg</div>

会使我的导航栏具有交互性，但是当我点击其中一个类别时，它只刷新同一页面。

<script>
$(document).ready(function() {
    //Assign the click handlers:
    var nav = $('#nav'),
        currentTab = nav.find('a').first().text();
    nav.on('click', 'a', function(e) {
        e.preventDefault();
        if( $(this).text() !== currentTab ) {
            $('.tabs-container').find('.tab').fadeOut(function() {
                $('#' + currentTab).fadeIn();
            }
        }
    }
});
</script>

似乎也没有帮助。