Question

我正在使用带有tile配置的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>

我的菜单如下所示：

My Menu

当我点击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 tab和anchor选项卡。

引入了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。没有用。加载新页面时，突出显示消失。任何帮助都将得到适当的赞赏。

Answer 1

我会建议你在菜单中突出显示选择的一种机制。

第1步：在css中有一类突出显示。

在css中

// this is the only css which make selected menu appears different than other menu items
selected or highlighted 
{ 
 color: red;
 background: yellow;
}

这是您突出显示的课程。

第2步：以body代码的ID和ul或li或{{1}的方式添加此类内容标签＆＃39; s是组合的。

css

中的

注意：这个类应该是css中的最后一个类，所以没有其他的css覆盖这个类

第3步：在图块中传递一个新参数，该参数将是不同网页的ID。

在 tiles.xml

中

 body#link1 a#link1,
 body#link2 a#link2,
 body#link3 a#link3,
 body#link4 a#link4{
         color: red;
        background: yellow;
 }

menu.jsp中的

步骤4：使用此tile参数

查看以下代码，我在<definition name="appointment" extends="login-success"> <put-attribute name="body" value="/Appointments/02_FirstScreen.jsp"/> <put-attribute name="menuselection" value="link1"/> </definition>代码中添加了ID，并在body代码中添加了

第5步：根据您的CSS，使用相同的ID与菜单<body id="<tiles:insertAttribute name="menuselection" ignore="true" />"> <div id='cssmenu'> <ul class="ui-state-focus"> <li class='has-sub last'><a href='#'>Module-1</a> <ul id="tab2"> <li><a id="link1" href='appointment'>Link 1</a></li> <li><a id="link2" href='#'>Link 2</a></li> </ul></li> <li class='has-sub last'><a href='#'>Module-2</a> <ul id="tab3"> <li><a id="link3" href='#'>Company</a></li> <li id="link4" class='last'><a href='#'>Contact</a></li> </ul></li> <li class='last'><a href='#'>Contact</a></li> </ul> </div> </body>或li标记。

在第4步中，我已将ID添加到a标记，如果它不适合您突出显示，则还应尝试使用a标记。

span

对于不同的页面，在tiles.xml中使用不同的<a id="link1" href='appointment'>Link 1</a>。

menuselection

这将突出显示link2。

另一种情况：如果您没有重新加载页面，则需要创建一个<definition name="link2" extends="login-success"> <put-attribute name="body" value="/Appointments/somepage.jsp"/> <put-attribute name="menuselection" value="link2"/> </definition>函数来更改正文标记的ID。

在你的js文件中

jquery

在链接的点击事件中调用此函数，简单。

function enablelink2highlight(){
    $("body").attr("id","link2");
}

注意：确保您没有多个<a id="link2" href='#' onClick="enablelink2highlight();">Link 2</a></li>标记，但如果您有多个body标记，则可以将类标记为body标记并在body选择中对其进行过滤

我希望这种机制可以帮到你。请与我分享您的结果。所以我可以帮助你更多。

如何在Struts2图块中单击时突出显示菜单中的活动元素？

1 个答案: