Question

我有一个3节的页面。每个div（部分）都有自己唯一的ID，它有两种形式的导航：箭头和按钮（共享相同的id's和jQuery）。当您在特定部分时，该网址会更改为与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根据网址中的ID更改颜色，换句话说，如果您在与特定{{{}相关的部分上1}}。因此，如果你在第2部分，第二个按钮的颜色与其他两个颜色不同。

我对jQuery不够好，想弄清楚如何在“选定”按钮中添加一个类，并知道这是一个选项，所以我对这种解决方案持开放态度但理想情况下我很想知道是否有一种纯粹的ID方法可以做到这一点。我找不到一个。

Answer 1

您可以通过hashchange收听window事件来实现此目的。结帐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");
});

纯CSS改变选择

1 个答案: