Question

伙计我正在与另一个人的代码合作，并想知道如何让导航器显示“活动状态”。换句话说，如何让该页面上的导航项处于活动状态并显示不同的bg颜色/文本颜色？这里是CSS和HTML，它很简单，我知道......但我无法弄清楚如何让这种活跃的状态发挥作用。

CSS：

.menu {width:100%; margin:0; padding:0;}
.menu a.menuitem {
    font-size: 10px;
    font-weight: bold;
    color: #a7a7a7;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    border-bottom: 1px solid #ffffff;
    margin: 0;
    padding: 4px 10px 4px 10px;
    text-decoration: none;
}
.menu a.menuitem:visited, .menu .menuitem:active {color:#9ca1a6; text-decoration: none;}




.menu a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/position:absolute; top:5px; right:5px; border: none;}
.menu a.menuitem:hover {
    background: #6dd0f7;
    color: #fff;
    text-decoration: none;
}


.menu div.submenu { /*DIV that contains each sub menu*/ width:auto; margin:0; padding:0;}

.menu div.submenu ul { /*UL of each sub menu*/ list-style-type:none; font-size:12px; margin:0; padding:0;}

.menu div.submenu ul li{border-bottom:1px solid #AFAFAF; line-height:12px; margin:0; padding:0;}

.menu div.submenu ul li a{display:block; font-size:12px; color:#383838; text-decoration: none; margin:0; padding:5px 10px 5px 20px;}

.menu div.submenu ul li a:link {color:#383838; text-decoration:none;}

.menu div.submenu ul li a:visited {color:#383838; text-decoration:none;}

.menu div.submenu ul li a:active {background:#D7EEFF; color:#0164B5; text-decoration:none;}

.menu div.submenu ul li a:hover {background:#D7EEFF; color:#0164B5; text-decoration:none;}


HTML:

         <div class="menu">
            <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a>
            <a class="menuitem submenuheader" href="">Messages (241)</a>
            <a class="menuitem submenuheader" href="">Account Settings</a>
            <a class="menuitem submenuheader" href="">Fees & Activities</a>
            <a class="menuitem submenuheader" href="">Notifications</a>
            <a class="menuitem submenuheader" href="">Contact Support</a>
          </div>

Answer 1

:active css选择器仅在您单击它时显示链接（mousedown）。请参阅 here 。

要以其他方式显示当前页面的导航项，您需要在该链接中添加一个额外的类，并将样式定义添加到该类。例如：

<a class="menuitem submenuheader active" href="">Messages (241)</a>

并将其设为：

.menu a.active { /* your definitions */ }

Answer 2

创建一个“当前”类并将其设置为当前显示的元素。

CSS示例

div.menu a.current {
    color: #fff !important;
    text-decoration: none;
    background: #6dd0f7;
}

<强> HTML

<div class="menu">
            <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a>
            <a class="menuitem submenuheader current" href="">Messages (241)</a>
            <a class="menuitem submenuheader" href="" class="current">Account Settings</a>
            <a class="menuitem submenuheader" href="">Fees & Activities</a>
            <a class="menuitem submenuheader" href="">Notifications</a>
            <a class="menuitem submenuheader" href="">Contact Support</a>
</div>

Jsfiddle：http://jsfiddle.net/XcmaD/

CSS使用现有代码创建活动状态Nav元素

2 个答案: