javascript - 突出显示当前菜单项

Question

我正在尝试突出显示当前菜单项，我搜索了各种站点以寻找解决方案，但我似乎无法使其工作。我希望你可以帮助我! 我现在有这个:

   <div class="menu">
    <ul class="highlight">

            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="contact.html">Contact</a></li>

    </ul>
</div>


.menu a{
  background-color:  #F2F2F2;   
  color: black;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px;

  }

 .active {
color: black;
}

.menu  li {
display: inline;
opacity: 0.5;

}
.menu li:hover {
opacity: 1;
}

我知道我必须将 .active 类添加到菜单中，无论我尝试什么 .menu li 都会覆盖它。我真的不知道现在该怎么办。

Answer 1

在 jquery 中

<script type="text/javascript">
        jQuery(document).ready(function($){
            // Get current url
            // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
            var url = window.location.href;
            $('.menu a[href="'+url+'"]').addClass('current_page_item');
        });
    </script>