当前页面的导航栏突出显示 [英] Navbar highlight for current page

问题描述

我想知道如何在当前页面的导航栏中添加高亮框。您知道人们知道他们在哪个页面上。

I was wondering how I would add the ability to add a highlight box the nav bar on the page your currently on. You know so people know what page their on.

非常类似于此站点，活动页面上带有白框： https://woodycraft.net/home/

Very much like this site with the white box on the active page:https://woodycraft.net/home/

以下是我的导航栏的CSS：

Here is the CSS for my nav bar:

/*TOP NAV BAR SECTION*/

*{margin: 0px;
  padding: 0px;}

#nav_bar {background-color: #a22b2f;
          box-shadow: 0px 2px 10px;
          height: 45px;
          text-align: center;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
                      display: block;
                      text-decoration: none;
                      font-weight: bold;
                      padding-left: 10px;
                      padding-right: 10px;
                      line-height: 45px;}

#nav_bar ul li ul {display: none;
                   list-style: none;
                   position: absolute;
                   background: #e2e2e2;
                   box-shadow: 0px 2px 10px;
                   text-align: left;}

#nav_bar ul li a:hover {background: #8e262a;}


#nav_bar a:active {background: white;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #252525;
                        display: block;}

#nav_bar ul li ul li a:hover {background: #4485f5;
                              color: #fff;}

这是我其中一个页面的HTML：

Here is the HTML for one of my pages:

<!--TOP NAV BAR SECTION-->

                <div id="nav_bar">
                                <ul>
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="status.html">Status</a></li>
                                  <li><a href="info.html">Info</a></li>

                                  <li><a href="#">Gamemodes</a>                                      
                                <ul>
                                  <li><a href="survival.html">Survival</a></li>
                                  <li><a href="pure-pvp.html">Pure-PVP</a></li>
                                  <li><a href="gamesworld.html">Gamesworld</a></li>
                               </ul>
                                  </li>                                    

                                  <li><a href="rules.html">Rules</a></li>
                                  <li><a href="vote.html">Vote</a></li>
                                  <li><a href="contact.html">Contact</a></li>
                               </ul>
                           </div>

推荐答案

如果每个HTML页面中的导航栏相同的网站，则可以这样操作：

例如，在 index.html 中，将 class ='active-page'添加到第一个菜单中项目：

If you have the same navigation bar in each HTML page of your website, then you can do like this:
For example in index.html add class='active-page' to the first menu item:

<div id="nav_bar">
    <ul>
        <li><a href="index.html" class='active-page'>Home</a></li>
        <li><a href="status.html">Status</a></li>
        <li><a href="info.html">Info</a></li>

然后在 status.html 中添加 class ='active页 ，但第二项除外：

Then in the status.html add class='active-page' again but for the second item:

<div id="nav_bar">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="status.html" class='active-page'>Status</a></li>
        <li><a href="info.html">Info</a></li>

然后对您的所有页面执行此操作。

And do this for all of your pages.

最后在您的CSS中为活动页面编写一个类，如下所示：

Finally in your css write a class for active-page like this:

#nav_bar ul li a.active-page
{
  background-color:blue;
}

这篇关于当前页面的导航栏突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！