2

伙计们，我正在使用另一个人的代码，并且想知道如何让有问题的导航显示“活动状态”。换句话说，我如何使该页面上的导航项处于活动状态并显示不同的背景颜色/文本颜色？这是 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>
4

2 回答 2

2

css 选择器:active仅在您单击它时选择链接（鼠标按下）。见这里。

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

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

并使用以下样式对其进行样式设置：

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

于 2013-02-11T19:39:03.067 回答
0

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

示例 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/

于 2013-02-11T19:40:35.463 回答