`a` не перемещается туда, где должно быть

Question

Когда я нажимаю a, меню мгновенно исчезает, даже если я применил onclick с помощью jQuery. Когда я даю a href="#", я смог увидеть его меню, но когда я, наконец, даю ссылку, которая является файлом jsp, она отображается для se c и исчезает.

заголовок. jsp

 <!-- HEADER -->
<div class="wrap">
    <header>
         <h1>
            <a href="#"><img alt="logo" src="../resources/img/buskingLogo.png"></a>
         </h1>
         <nav class="gnb on">
             <a href="#">A</a>
             <a href="#">B</a>
             <a href="../ac/cal-list.do">ACCOUNT</a> <!-- this part doesn't work.. -->
             <a href="#">D</a>
             <a href="#">E</a>
         </nav>
    </header>
         
        <div class="lnb bus">
            <div class="lnb-con">
                <a href="#" class="on">a</a>
                <a href="#">b</a>
                <a href="#">c</a>
                <a href="#">d</a>
            </div>
        </div>
        
        <div class="lnb labor">
            <div class="lnb-con">
                <a href="#">a</a>
                <a href="#">b</a>
                <a href="#">c</a>
            </div>
        </div>
        
        <div class="lnb acct on" >
           <div class="lnb-con">
                <a href="#">a</a>
                <a href="#">b</a>
            </div>
        </div>
        
        <div class="lnb repair">
            <div class="lnb-con">
                <a href="#">a</a>
                <a href="#">b</a>
            </div>
        </div>
        
        <div class="lnb fine">
            <div class="lnb-con">
                <a href="#">a</a>
                <a href="#">b</a>
                <a href="#">c</a>
            </div>
        </div>
</div>

gnb. js

(function($){
$(function(){
    
    var $wrap = $('.wrap'),
        $gnb = $wrap.find('.gnb'),
        $gnb_a = $gnb.find('a'),
        $lnb = $wrap.find('.lnb-con'),
        $lnb_a = $lnb.find('a');
    
    $gnb.on('click', 'a', function(event){  <!-- added `event`.. -->
    
        var e = $(this).index();
        
       $lnb.removeClass('on');
       $lnb.eq(e).addClass('on');
       
       event.preventDefault() <!-- edited this part as well, but not working.. -->
        
    });
    
    $gnb_a.on('click', function(){
        
       $gnb_a.removeClass();
       $(this).addClass('on');
        
    }); 
    
    $lnb_a.on('click', function(){
       $lnb_a.removeClass();
        $(this).addClass('on');
    });
    
});
})(jQuery);

заголовок. css

/*layout*/
.wrap {
    width: 100%;
    height: 100%;
}
header {
    height: 50px;
    background: rgba(25, 103, 46, 0.83);
    color: #eef8e8;
}
header h1, .gnb {
    position: absolute;
    top: 15px;
    height: 20px;
    line-height: 20px
}
header h1 {
    left: 1%;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    top: 13px
}
header h1 img {
    width: 120px
}
.gnb {
    right: 0;
    width: auto;
}
.gnb a {
    display: block;
    float: left;
    margin: 0 20px;
    padding: 0 5px
}
/*jQuery*/
.gnb a.on {
    background: rgb(151, 190, 161);
    color: #222;
}

.lnb {
    position: absolute;
    left: 0;
    width: 15%;
    height: 100%;
    background: #eee;
    float: left;
}
.lnb .lnb-con {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    height: auto;
    
    background: rgb(207, 227, 213);
    top: 20px;
    border-radius: 5px;
    text-align: center;
    opacity: 0;
    z-index: 1;
    transition: all .2s;
}

.lnb a {
    display: block;
    padding: 10px;
    position: relative;
    font-size: 14px;
    transition: all .3s
}
/*jQuery*/
.lnb .lnb-con.on {
    opacity: 1;
    z-index: 3
}
.lnb .lnb-con a:after {
    content: '';
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: rgba(25, 103, 46, 0.83);
    transition: all .4s;
    z-index: -1
}
.lnb .lnb-con a:hover:after {
    width: 100%;
}
.lnb .lnb-con a:hover {
    background: rgb(184, 211, 192);
}

/*jQuery*/
.lnb .lnb-con a.on {
    background: rgb(184, 211, 192);
    border-left: solid 5px #19672e;
}

main {
    position: absolute;
    height: auto;
    width: 85%;
    left: 15%;
    top: 50px;
    float: right;
    background: transparent;
    z-index: 10
}

Не могли бы вы сообщить мне, в чем моя проблема? Спасибо.