当前页面的导航栏突出显示

Question

我想知道如何添加在您当前所在页面的导航栏上添加突出显示框的功能。你知道这样人们就知道他们在哪个页面上。

非常喜欢这个网站，活动页面上有白框：https://woodycraft.net/home/

这是我的导航栏的 CSS：

/*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：

<!--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>

Answer 1

您可以使用 jquery 函数 window.location.href 将您当前所在的网站与 的 href 进行比较> 在列表元素中。例如，“index.html”：

<li><a href="index.html">Home</a></li>

下面的代码在列表元素中搜索活动页面的href。然后使用 addClass('active') 将类“active”添加到活动页面 以便您现在可以通过 CSS 调用它>。将此代码放在 html 文件的头部。

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>

您现在可以添加您的 css 条件，例如更改颜色：

#nav_bar .active {
    color:            #F8F8F8;
    background-color: #4f81bd;
}

Answer 2

如果您网站的每个 HTML 页面中都有相同的导航栏，那么您可以这样做：
例如，在 index.html 中将 class='active-page' 添加到第一个菜单项：

<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-page' 但第二项：

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

并为您的所有页面执行此操作。

最后在你的 CSS 中为 active-page 编写一个类，如下所示：

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

Answer 3

我在某处找到了一个非常简单的代码。

<script>
    $(function () {
        $('nav li a').filter(function () {
            return this.href === location.href;
        }).addClass('active');
    });
</script>

Answer 4

    $(function (){
        $('a').each(function(){
            if ($(this).prop('href') === window.location.href) {
                $(this).css({"background": "linear-gradient(to left, #f58D28 0, #f58D28 66%, #ba5c00 100%)", "border-radius": "30px"});
    
            }
        })
    })