主动锚标签背景颜色

时间:2015-12-27 13:46:26

标签: html css tiles

我有使用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>

apache tiles Vertical Menu's page layout

所需行为适用于<li><a href="#">DashBoard</a></li>菜单项,因为没有操作映射到此锚标记。但是,如果我们将任何操作映射到链接,并且在单击链接时整个页面都会刷新,右侧的正文部分具有所需的页面,但左侧的菜单我已将悬停,活动, css或jQuery的焦点行为正在迷失。如何解决这个问题?

3 个答案:

答案 0 :(得分:0)

找到工作的fiddel:https://jsfiddle.net/s8hLsogc/

我添加一些棘手的选择器来捕捉每个想法,就像这样:

li:hover *

答案 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;
}

请使用此:聚焦而不是:活动,肯定会有效。