使用href =“＃”jquery工作，但href =“page.jsp”无效 [英] With a href=“#” jquery work but with a href=“page.jsp” not working
本文介绍了使用href =“＃”jquery工作，但href =“page.jsp”无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好
我的问题是，当我点击菜单时，它必须突出显示为已选中。但是当我选择任何与页面链接的菜单选项卡然后显示为选中的主页选项卡时，这不会发生，但如果我用＃替换该页面链接，则该选项卡显示为已选中。下面是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）== 管理员）{％>
< jsp：include page = adminHead.jsp>< / jsp ：包括>< / TD>
<％} 其他 {％>
< jsp：include page = guestHead.jsp>< / jsp ：包括>< / TD>
<％}％>< / td>
< / tr>
< / table>
< table border = 0 width = 100％ cellspacing = 0 cellpadding = 1 bgcolor = ＃36b0b6>
< tr bgcolor = ＃36b0b6>
< td width = 10％ height = 557 valign = 顶部>
< jsp：include page = left.jsp>< / jsp ：包括>
< / 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 = 单击图像的右半部分以向前移动。>< img class = 示例-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 = 或者按键盘上的右箭头。>< 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 = 当您正在查看时，集合中的下一个图像会被预先加载。>< 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 = 单击图像外的任何位置或右侧的X以关闭。>< 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>
$（窗口）.load（function（）{
$（' ＃cssmenu li' ）。on（' click'，function（）{
$（ ' li.active'）。removeClass（' active'）;
$（ this ）。addClass（' active'）;
}）;
}）;
< / script>
< pre lang = CSS>< div id = ' cssmenu'>
< ul>
< li class = ' active'>< a href = index.jsp> Home< / a>< / li>
< li>< a href = Untitled-1.jsp>关于我们< / a>< / li>
< li>< a href = gallery.jsp>图库< / A>< /锂>
< li>< a href = ＃> Alumni< / a> ;< /锂>
< li>< a href = ＃>事件< / a> ;< /锂>
< li>< a href = ＃>轮询< / a> ;< /锂>
< li>< a href = ＃>反馈< / a> ;< /锂>
< li class = ' last'>< a href = ＃>联系我们< / a>< / li>
< / ul>
< / div>
style.css
@ import url（http： // fonts.googleapis.com/css?family=Lato:300,400,700);
@ charset UTF-8;
/ * 基本样式* /
＃ 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;
背景 ： -moz - 线性渐变（顶部，＃36b0b6 0％，＃2a8a8f 100％）;
背景 ： -webkit-gradient（线性，左上，左下，颜色停止（0％，＃36b0b6），颜色停止（100％，＃2a8a8f） ）;
背景 ： -webkit-linear-gradient（top，＃36b0b6 0％，＃2a8a8f 100％）;
background ： -o-linear-gradient（top，＃36b0b6 0％，＃2a8a8f 100％）;
背景 ： -ms-linear-渐变（顶部，＃36b0b6 0％，＃2a8a8f 100％）;
背景 ： 线性渐变（顶部，＃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 ： 阻止;
}
＃ 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 < span class =code-keyword>： 5px;
padding < span class =code-keyword>： 8px 15px 9px 15px;
显示 ： block;
text-decoration ： none;
颜色 ： #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;
}
＃< span class =code-leadattribute> cssmenu li 。 active a {
- webkit-border-radius ： 5px;
- moz-border-radius ： 5px;
- ms-border-radius ： 5px;
- o-border- radius ： 5px;
border-radius ： 5px;
显示 ： block;
背景 ： ＃1e6468;
border ： 1px solid＃133e40;
- moz-box-shadow ： inset 0 5px 10px＃133e4 0;
- 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 < span class =code-keyword>： 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;
}
我尝试过：
$（窗口）.load（function（）{
$（'＃cssmenu li'）。on（'click'，function（）{
$（'li.active'）。removeClass（'active'）;
$（this）.addClass（'active'）;
}） ;
}）;
解决方案
（窗口）.load（function（）{
（' ＃cssmenu li'）。on（' 点击'，function（）{
（' li.active'）。removeClass（' active' ）;
Hello
My problem is when I click on menu it must be highlighted as selected. But this is not happening, when I am selecting any menu tab which is link with page then Home tab shown as selected, but if I replace that page link with # then that tab is showing as selected. Below is the code give for gallery.jsp,guestHead.jsp and 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>
<pre lang="CSS"><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;
}
What I have tried:
$(window).load(function(){
$('#cssmenu li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
});
解决方案
(window).load(function(){
('#cssmenu li').on('click', function(){
('li.active').removeClass('active');
这篇关于使用href =“＃”jquery工作，但href =“page.jsp”无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
