有一個href =「＃」jQuery工作，但與href =「page.jsp」不工作

Question

我已經問了這個問題幾天後沒有得到任何滿意的答覆我的問題是，當我點擊菜單，它必須突出顯示作爲選擇。但是，這並沒有發生，當我選擇任何菜單選項卡鏈接頁面，然後主頁選項卡顯示爲選中，但如果我用＃替換該頁面鏈接，然後該選項卡顯示爲選中。下面是代碼給出gallery.jsp，guestHead.jsp和CSS gallery.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> 

guestHead.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> 

的style.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; 
} 

image showing the gallery tab clicked but home is selected

image showing Alumni tab clicked and Alumni is selected which is "#"

Answer 1

在一種情況：

1. 您修改元素所屬的類別在當前頁
2. 您按照鏈接到#，這是當前頁
頂部

在其他情況下：

1. 您修改當前頁面的元素屬於類
2. 您按照鏈接到page.jsp，這是一個不同頁面，它沒有你只是對DOM所作的修改（最後的頁）在它

---

使用服務器端代碼請求頁面時設置類。