1
我正在使用帶有tile配置的struts2。我在側邊菜單中有一些鏈接。所以，當一個新頁面被轉發時，活動元素突出顯示已被刪除。我正在使用瓷磚配置如下。如何在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>
我的菜單看起來像如下：
當我點擊鏈接1，它應該在身體往前一個jsp。同時，鏈接1必須保持突出顯示，直到我點擊另一個鏈接，例如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如下所示：在我使用的鏈接裏標籤和錨標籤。
引入了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。 – 2014-10-07 12:02:06
所以，你想讓我把所有li元素改爲單選按鈕組吧？ – Vishnu 2014-10-07 12:05:26
如果您正在重新加載頁面，則焦點將丟失。你必須自己處理恢復先前的選擇以突出顯示它。有幾種方法可以做到這一點，我已經在[這個答案]中列出了一些方法（http://stackoverflow.com/a/14067239/1654265） – 2014-10-07 12:08:39