个人中心
gpt4 book ai didi

css - 在 Struts2 磁贴中单击时如何突出显示菜单中的事件元素？

转载 作者：行者123 更新时间：2023-11-28 17:30:27 26 4
gpt4 key购买 nike

我正在使用带有磁贴配置的 struts2。我在侧面菜单中有一些链接。因此，当转发新页面时，事件元素突出显示已被删除。我正在使用如下图 block 配置。

 <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。

ma​​inTemplate.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 选项卡和 anchor 选项卡作为链接。

菜单.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 和 li:focus。没有用。加载新页面时突出显示消失。任何帮助将不胜感激。

最佳答案

我会向您推荐一种在菜单中突出显示选择的机制。

第 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;
}

这是您突出显示的类(class)。

第二步:添加此类内容，body标签的id和ul或li 或 a 标签的组合。

在 css 中

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

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

第 3 步:在 tiles 中传递一个新参数，该参数将是不同页面的 id。

在 tiles.xml

<definition name="appointment" extends="login-success">
  <put-attribute name="body"   value="/Appointments/02_FirstScreen.jsp"/>      
  <put-attribute name="menuselection"   value="link1"/>      
</definition>

第 4 步:在 menu.jsp 中使用此 tiles 参数

看下面的代码，我在 body 标签和 a 标签中添加了 id

<body id="<tiles:insertAttribute name="menuselection" ignore="true" />">

<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 id="link1" href='appointment'><span>Link 1</span></a></li>
                <li><a id="link2" 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 id="link3" href='#'><span>Company</span></a></li>
                <li id="link4" class='last'><a href='#'><span>Contact</span></a></li>
            </ul></li>
        <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
</div>
</body>

第 5 步:根据您的 css，将相同的 id 与菜单的 li 或 a 标签一起使用。

在第 4 步中，我已经将 id 添加到 a 标签，如果它对您不起作用，您也应该尝试使用 span 标签获得亮点。

 <a id="link1" href='appointment'><span>Link 1</span></a>

不同的页面在tiles.xml中使用不同的menuselection

<definition name="link2" extends="login-success">
   <put-attribute name="body"   value="/Appointments/somepage.jsp"/>      
   <put-attribute name="menuselection"   value="link2"/>      
</definition>

这将突出显示 link2。

现在另一种情况:如果您不重新加载页面，则需要创建一个 jquery 函数来更改 body 标记的 id。

在你的js文件中

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

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

<a id="link2" href='#' onClick="enablelink2highlight();"><span>Link 2</span></a></li>

注意: 确保您没有多个 body 标签，但如果您有多个 body 标签，您可以给 body 标签赋予类并在 中过滤它jquery 选择。

希望这个机制可以帮到你。请与我分享你的结果。以便我能为您提供更多帮助。

关于css - 在 Struts2 磁贴中单击时如何突出显示菜单中的事件元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26234585/

26 4 0
文章推荐： javascript - Nav with JS(双开)
文章推荐： javascript - 如何在React中执行返回功能
文章推荐： javascript - 当光标离开屏幕时，游戏不会以 Javascript 结束
文章推荐： javascript - D3 热图 - 色标仅显示一种颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com