导航栏保持高亮状态（适合共用导航）

导航栏是所有页面共用的组件，导航栏会单独分离出来作为各个页面的引用，很多时候需要高亮当前页面的选项。这里用js来控制高亮情况。

（根据自己的业务需求修改样式）

思路：寻找与当前页面路由匹配的href

css ：

.active{
    color: #fff;
    background-color: #c92b30;
}

当前页面高亮的css类为active 

html：

<div id="navbars">
    <ul>
       <li class="nav-item atiive">
          <a href="index">首页</a>
       </li>
       <li class="nav-item">
          <a href="page1.html">页面1</a>
       </li>
       <li class="nav-item">
           <a href="page2.html">页面2</a>
       </li>
       <li class="nav-item">
          <a href="page3.html">页面3</a>
       </li>
       <li class="nav-item">
           <a href="page4.html">页面4</a>
       </li>
   </ul>
</div>

js：

$(function () {
    // 获取当前页面的网址
    let url = location.href;
    // 当前页面的高亮状态
    let status = false;
    // 检索每个id为navbars中的a标签，为页面添加高亮状态
    $('#navbars a').each(function () {
        // 找到跟当前网址与url匹配，并且不为空。找到就在相应位置添加高亮class
        if((url + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href') != '')  {
            $(this).parent('li').addClass('active');
            status = true;
        }else {
            $(this).parent('li').removeClass('active')
        }
    });
    //初始状态为false，默认第首页（第一个）高亮
    if(!status){
        $('#navbars ul li').eq(0).addClass('active');
    }
})

 这里，$(this)为当前的a标签，所以要给a的父标签添加active。（所以根据自己的html布局来对应添加）

str.indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

注意： indexOf() 方法区分大小写。