【发布时间】：2014-10-07 11:06:04
【问题描述】：
我正在使用带有瓷砖配置的 struts2。我在侧面菜单中有一些链接。因此，当转发新页面时，活动元素突出显示已被移除。我正在使用瓦片配置如下。
<definition name="login-success" template="/mainTemplate.jsp">
<put-attribute name="header" value="/header.jsp"/>
<put-attribute name="title" value="Welcome Page"/>
<put-attribute name="menu" value="/menu.jsp"/>
<put-attribute name="body" value="/Appointments/01_Dummy.jsp"/>
<put-attribute name="footer" value="/footer.jsp"/>
</definition>
<definition name="login-error" template="/mainTemplate.jsp">
<put-attribute name="title" value="Login Error"/>
<put-attribute name="body" value="/login-error.jsp"/>
</definition>
<definition name="appointment" extends="login-success">
<put-attribute name="body" value="/Appointments/02_FirstScreen.jsp"/>
</definition>
我的菜单如下所示：
当我单击link1 时，它应该在正文中转发一个jsp。同时，link1 必须保持突出显示，直到我单击其他链接，例如 link2 或 Module2。
mainTemplate.jsp：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--<title><tiles:getAsString name="title" /></title>-->
<title>ISIS Patient Monitoring Solution</title>
<link rel="shortcut icon" type="image/x-icon"
href="../images/isis_logo.jpg" />
</head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 6px;
background: #fff;
height: 58px;
}
#sideMenu {
padding: 6px;
padding-bottom: px; /* Height of the footer element */
height: 1 px;
}
* /
#content {
padding: 6px;
padding-bottom: 10px; /* Height of the footer element */
height: 2px;
position: relative;
}
#footer {
width: 100%;
padding: 2px;
height: 15px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
}
</style>
<body>
<div id="wrapper">
<div align="left" id="header">
<tiles:insertAttribute name="header" />
</div>
<div id="sideMenu">
<tiles:insertAttribute name="menu" />
</div>
<div align="center" id="content">
<tiles:insertAttribute name="body" />
</div>
<div align="center" id="footer">
<tiles:insertAttribute name="footer" />
</div>
</div>
</body>
</html>
我的菜单 jsp 如下所示：我使用 li 标签和锚标签作为链接。
Menu.jsp：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath}/css/styles.css" />
<title>ISIS Patient Monitoring System</title>
<link rel="shortcut icon" type="image/x-icon"
href="./images/isis_logo.jpg" />
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="Javascripts/script.js">
</script>
</head>
<body>
<div id='cssmenu'>
<ul class="ui-state-focus">
<li class='has-sub last'><a href='#'><span>Module-1</span></a>
<ul id="tab2">
<li><a href='appointment'><span>Link 1</span></a></li>
<li><a href='#'><span>Link 2</span></a></li>
</ul></li>
<li class='has-sub last'><a href='#'><span>Module-2</span></a>
<ul id="tab3">
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
我用过li:active, li:visited and li:focus。没有用。加载新页面时突出显示消失。任何帮助将不胜感激。
【问题讨论】：
-
高亮显示就像单选按钮组一样，当一个被按下时它被高亮显示，而其他的则没有被照亮。在某些情况下，您只需要检查哪个按钮处于活动状态并更新 css。
-
那么，您希望我将所有 li 元素更改为单选按钮组吗？
-
如果您正在重新加载页面，那么焦点将丢失。您必须自己处理恢复以前的选择以突出显示它。有几种方法可以做到这一点，我在this answer 中列出了其中的一些
-
当使用单选按钮时，它解决了一半的问题（更新 css），但另一个问题仍然存在。