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

在一个案例中：

您可以在当前页面
您点击了var B = option.Substring( option.IndexOf( "A", StringComparison.InvariantCulture), option.IndexOf( "C", StringComparison.InvariantCulture));的链接，这是当前页面的顶部

在另一种情况下：

您可以在当前页面
您可以点击指向#的链接，这是不同的页面，其中没有您对DOM（最后一页）所做的修改

使用服务器端代码在请求页面时设置类。

使用href =＆＃34;＃＆＃34; JQuery工作，但有一个href =＆＃34; page.jsp＆＃34;不工作

1 个答案: