我有使用struts2图块构建的jsp页面,左侧有垂直菜单。选择菜单后,我想将所选菜单背景颜色的背景保持为白色。动作将是smiler to tab selection。我用谷歌搜索解决方案,但没有运气。该效果适用于悬停操作,但背景颜色不一致。
下面是我用css的HTML代码。
ul.v_menu li a
{
display: block;
padding: 10px 20px;
text-decoration: none;
white-space: nowrap;
text-align:left;
color: #fff;
}
ul.v_menu li a:hover,ul.v_menu li a.active
{
color:black;
background: white;
}
HTML
<ul class="v_menu">
<li><a href="#">DashBoard</a></li>
<li><tags:a action="viewIncomeGrid">Income</tags:a></li>
<li><a href="#">Expense</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Payee</a></li>
</ul>
瓦片:
<definition name="myBaseLayout" template="/MyBaseLayout.jsp">
<put-attribute name="title" value="M-Manager"/>
<put-attribute name="headerMenu" value="/Banner.jsp"/>
<put-attribute name="vMenu" value="/vMenu.jsp"/>
<put-attribute name="body" value="/Body.jsp"/>
<put-attribute name="footer" value="/Footer.jsp"/>
</definition>
所需行为适用于<li><a href="#">DashBoard</a></li>
菜单项,因为没有操作映射到此锚标记。但是,如果我们将任何操作映射到链接,并且在单击链接时整个页面都会刷新,右侧的正文部分具有所需的页面,但左侧的菜单我已将悬停,活动, css或jQuery的焦点行为正在迷失。如何解决这个问题?
答案 0 :(得分:0)
答案 1 :(得分:0)
http://www.w3schools.com/cssref/sel_active.asp
ul.v_menu li a:active
{
color:black;
background: white;
}
答案 2 :(得分:0)
请检查这个小提琴:https://jsfiddle.net/panks_josh/1gxq8se6/
ul.v_menu li a {
display: block;
padding: 10px 20px;
text-decoration: none;
white-space: nowrap;
text-align: left;
color: #fff;
}
ul.v_menu li a:hover {
color: white;
background: black;
}
ul.v_menu li a:focus {
color: white;
background: black;
}
请使用此:聚焦而不是:活动,肯定会有效。