纯 CSS 改变选择

Question

我有一个 3 部分页面。每个div（部分）都有自己独特的ID，它有两种导航形式：箭头和按钮（它们共享相同的id's 和jQuery）。当您在特定部分时，url 将更改为与div 关联的 id 的名称。很标准。

<div class="nav-buttons-wrap">
    <a href="#Welcome" class="nav-buttons"></a>
    <a href="#We-Are-The-Leader" class="nav-buttons"></a>
    <a href="#Services" class="nav-buttons"></a>
</div>

<a href="#We-Are-The-Leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

<!-- SECTION 1 --> <div id="#Welcome"></div>
<!-- SECTION 2 --> <div id="#We-Are-The-Leader"></div>
<!-- SECTION 3 --> <div id="#Services"></div>

<script>
jQuery(function($) {
    $(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

            var target = this.hash,
            $target = $(target);

            var navBarHeight = 0; // change if nav bar height changes
            $('html, body').stop().animate({
                'scrollTop': ($target.offset().top - navBarHeight)
            }, 1000, 'easeInOutQuint', function () {
                window.location.hash = target;
            });
        });
    });
});
</script>

这工作得很好，但现在我希望 .nav-buttons 根据 url 中的 ID 更改颜色，换句话说，如果您位于与特定 ID 关联的部分。因此，如果您在第 2 部分，则第二个按钮的颜色与其他两个按钮的颜色不同。

我在 jQuery 方面还不够好，无法找到一种将类添加到“已选择”按钮的简洁方法，并且知道这是一种选择，因此我对这种解决方案持开放态度，但理想情况下我很想知道是否有一种纯粹的CSS 方法可以做到这一点。我找不到一个。

Answer 1

实现此目的的一种方法是在window 上监听hashchange 事件。结帐此working example on Plunker。 The code can also be found on Plunker.

关键部分是这样的：

$(window).on("hashchange", function() {
  $(".nav-buttons-wrap a").removeClass("selected");
  $(".nav-buttons-wrap a[href='" + window.location.hash + "']").addClass("selected");
});