javascript - 使用 jQuery/Javascript 突出显示事件/选定的链接

Question

我在我的网站中使用此菜单

<div class="q-nav-bar">
<div class="q-nav-bar-item"><a href="#">Home Page</a></div>
<div class="q-nav-bar-item"><a href="#">Link 1</a></div>
<div class="q-nav-bar-item"><a href="#">Link 2</a></div>
</div>

此代码用于突出显示所选链接:

$(function(){
        $(\'.q-nav-bar-item a\').each(function(){
            if ($(this).prop(\'href\') == window.location.href) {
            $(this).addClass(\'selected\'); 
            $(this).parents(\'a\').addClass(\'selected\');
            }
        });
    });

它工作正常，但每次新任务访问我的页面时，如何默认将“选定”规则应用于主页链接？

Answer 1

var $link = $('a');

$link.on('click', function(event) {
  event.preventDefault(); // stop normal link function (#)
  $link.removeClass('active');
  $(this).addClass('active');
});

$('.default').trigger('click');

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='default'>Link #1</a>
<a href="#">Link #2</a>