Question

我有使用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的焦点行为正在迷失。如何解决这个问题？

Answer 1

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

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

li:hover *

Answer 2

http://www.w3schools.com/cssref/sel_active.asp

ul.v_menu li a:active
    {
        color:black;
        background: white;
    }

Answer 3

请检查这个小提琴：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;
}

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

主动锚标签背景颜色

3 个答案: