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

Answer 2

这很可能会对您有所帮助：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”的链接具有以下样式。

Answer 3

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

假设您在目录页面上。所以你的链接应该是

<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;
    }

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

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

3 个答案: