0

我正在尝试使我的导航栏突出显示，我的意思是我必须突出显示我正在浏览的活动页面的按钮。我已经尝试过这种方式，但它没有成功。我有这个 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/>

他们就是不成功！请如果有人可以解释如何做对吗？提前致谢！

4

3 回答 3

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

于 2013-02-26T13:49:00.417 回答
1

这很可能会对您有所帮助：http: //hicksdesign.co.uk/journal/highlighting-current-page-with-css

基本上，这个想法是您将 id 添加到每个页面，如下所示：

<body id="home">

而且由于您已经将导航作为未排序的列表，因此类似于：

<ul id="navlist">
    <li><a href="index.html" id="homenav">Home</a></li>
    <li><a href="products.html" id="prodnav">Products</a></li>
    <li><a href="faq.html" id="faqnav">FAQ</a></li>
    <li><a href="contact.html" id="connav">contact us</a></li>
</ul>

然后可以像这样使用css：

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
    color: #fff;
    background: #930;
}

它定义了如果 body id="home"，则与 id="homenav" 的链接具有以下样式。

于 2013-02-26T14:10:01.753 回答
0

如果我了解您想要实现的目标，您应该在活动页面的按钮中添加一个类。

假设您在目录页面上。所以你的链接应该看起来像

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

在此示例中，您的链接目录具有“活动”类。现在，你可以为这个类设置你的 css，所以，对于这个按钮：

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

当然，这意味着您网站的每个页面都必须在相应链接上显示一个带有“活动”类的菜单。

于 2013-02-26T13:51:35.603 回答