基于div的动态菜单背景

Question

我有这样的菜单

 Home -- Work -- Pricing -- Contact Us -- About

它使用一个页面布局。我在Bootsrap上启用了Scrollspy。当我转到特定div时，活动菜单背景应该是动态的。因此，当焦点位于“关于”时，背景应更改为图像中的颜色。

目前的CSS代码是：

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
      background-color: #080808;
      color: #FFFFFF;
}

Answer 1

Fiddle

使用一些Javascript＆amp; jQuery，我们可以为每个导航链接添加监听器，以相应地改变导航的背景：

$('nav > div.home').click(function () {
    $('nav').css('background', 'blue');
});

$('nav > div.work').click(function () {
    $('nav').css('background', 'red');
});

$('nav > div.pricing').click(function () {
    $('nav').css('background', 'green');
});