html - 我想从我的导航栏中突出显示我的按钮请帮帮我

Question

我正在尝试使我的导航栏突出显示，我的意思是我必须突出显示我正在浏览的事件页面的按钮。我试过这种方式，但没有成功。我有这个 HTML 代码作为我的导航菜单:

<code>
<ul class="nav">
    <li class="first">
        <a href="index.htm">Home</a>
    </li>

    <li>
        <a class="hasdropdown" href="collections/catalog/catalog.htm">Catalog</a>                       
    </li>

    <li>                            
        <a class="hasdropdown" href="collections/ocassions/ocassions.htm">Ocassions</a>
    </li>

    <li>
        <a class="hasdropdown" href="collections/specials/specials.htm">Specials</a>
    </li>

    <li>                            
        <a href="pages/plants.htm">Plants</a>                              
    </li>

    <li>
        <a href="pages/exotic.htm">Exotic</a>
    </li>

    <li>
        <a href="pages/contact.htm">Contact</a>
    </li>
</ul>  

我也有这个 CSS

#header #navblock ul.nav li a:hover {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

#header #navblock ul.nav li a.active:visited {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

<br/>

他们只是行不通!请问是否有人可以解释如何正确执行？提前致谢!

Answer 1

您将要向当前正在浏览的页面添加一个类 .current。所以，如果用户在主页上:

<li class="first">
        <a href="index.htm" class="current">Home</a>
    </li>

然后，根据需要配置 .current 类:

.current {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

引用。 http://alistapart.com/article/keepingcurrent