Question

您好我想要一些帮助尝试动画我的导航栏。点击页面后，我希望导航链接仍然突出显示。所以，例如，如果我按下一个＆＃34; home＆＃34;在主页上的按钮将突出显示主页按钮，以便在此页面上显示您的确定。会使用：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;
}

当你点击HOME页面链接时，通过java脚本将此类添加到 li 标记这里是代码

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

或者您可以使用gt（），lt（）选择器从其他 li 标记中删除活动类

Answer 2

你最好的选择是使用Javascript（例如jQuery）来帮助你，在原生CSS中:active只会在当前的交互状态发生时设置样式，如果依赖路由，:target可能不可靠，点击其他地方时，最终选项:focus将失败。

通过使用jQuery，您可以更紧密地保持对应用程序/删除选定状态的控制，例如：

$('#header-content li').on('click', function(){
     $(this).addClass('selected').siblings().removeClass('selected');
});

这会隔离相关元素，当您单击一个类时添加类selected，并将其从其兄弟姐妹中删除。

单击后导航会保持突出显示

2 个答案: