使用 href=“#” JQuery 工作，但使用 href=“page.jsp” 不起作用

前我已经问过这个问题没有得到任何满意的答复我的问题是当我单击菜单时，它必须突出显示为选中。但是当我选择任何与页面链接的菜单选项卡时，这不会发生，然后"主页"选项卡显示为选中，但是如果我将该页面链接替换为#，则该选项卡将显示为已选中。下面是 gallery.jsp，guestHead.jsp 和 CSS 的代码图库.jsp

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr bgcolor="#36b0b6">
    <td width="100%"><% if(session.getAttribute("userid")=="Admin"){ %>
        <jsp:include page="adminHead.jsp"></jsp:include></td>
        <% } else { %>
        <jsp:include page="guestHead.jsp"></jsp:include></td>
        <% } %></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1" bgcolor="#36b0b6">
  <tr bgcolor="#36b0b6">
    <td width="10%" height="557" valign="top">
     <jsp:include page="left.jsp"></jsp:include>
    </td>
    <td width="75%" valign="top">       
    <div class="container">
            <div class="image-row">
                <div class="image-set">
                    <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
                    <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
                    <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
                    <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
        </div>
            </div>
    </div>
    </td>
</tr>
<table>

客座头.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<link rel="stylesheet" href="styles.css" />
<script src="jquery-1.12.1.min.js" type="text/javascript"></script>
<script language="javascript">
$(window).load(function(){
  $('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
  });
});
</script>
<div id='cssmenu'>
<ul> 
  <li class='active'><a href="index.jsp">Home</a></li> 
  <li><a href="Untitled-1.jsp">About Us</a></li> 
  <li><a href="gallery.jsp">Gallery</a></li> 
  <li><a href="#">Alumni</a></li> 
  <li><a href="#">Events</a></li> 
  <li><a href="#">Polling</a></li> 
  <li><a href="#">Feedback</a></li> 
  <li class='last'><a href="#">Contact Us</a></li> 
</ul>   
</div>

风格.css

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#cssmenu {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#cssmenu ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#cssmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#cssmenu li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}

显示单击了"图库"选项卡但选择了"主页"

显示单击