html - 单击导航后导航保持突出显示

Question

您好，我只是想获得一些帮助来为我的导航栏制作动画。我希望导航链接在我点击页面后仍然突出显示。因此，例如，如果我在主页上按下“主页”按钮，主页按钮将突出显示，以表明您肯定在此页面上。会使用 :target 还是::active？

<div id="header-content">
            <div class="hire"><h3>For Hire</h3></div>
            <h1><a href="index.html">Black Cab Tours</a></h1>

                    <nav class="cl-effect-8">
                    <ul>
                <li><a onclick="tours.html" href="#tab1">Tours</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="#">Review</a></li>
                    </ul>
                </nav>

        </div>

Answer 1

像这样创建一个css类

.active {
 background: #c2c2c2;
}

当你点击主页链接时，通过 java 脚本将这个类添加到 li 标签，这里是代码

$('li').click(function(){
     $(this).removeClass('active');
     $(this).addClass('active');
});

或者您可以使用 gt()、lt() 选择器从其他 li 标签中移除事件类