几天
"校友"选项卡并选择"校友"的图像,即"#"前我已经问过这个问题没有得到任何满意的答复我的问题是当我单击菜单时,它必须突出显示为选中。但是当我选择任何与页面链接的菜单选项卡时,这不会发生,然后"主页"选项卡显示为选中,但是如果我将该页面链接替换为#,则该选项卡将显示为已选中。下面是 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;
}
显示单击了"图库"选项卡但选择了"主页"
的图像显示单击
在一种情况下:
- 修改元素在当前页中所属的类
- 您点击链接转到
#
,这是当前页面的顶部
在另一种情况下:
- 修改元素在当前页中所属的类
- 您点击链接指向
page.jsp
,这是一个不同的页面,其中没有您刚刚对 DOM(最后一页)所做的修改
使用服务器端代码在请求页面时设置类。