Question

我正在使用引导程序模板，当向下滚动时导航栏会缩小。我让导航栏变得透明，直到滚动为止，只需更改：

即可变为白色

.navbar-default {
  background-color: transparent;
}
.navbar-default.navbar-shrink {
  background-color: #fff;
}

现在，由于background-img，我的徽标大部分都是白色，但我希望当navbar-shrink生效时，它会更改为黑色版本。

我试图通过使用if语句在'navbar-shrink'类处于活动状态时更改图像src attr来实现它，但是它必定是错误的。

我尝试了不同的方法并想出了这个：

$(document).ready(function() {
if($('nav').hasClass('navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

或者

$(document).ready(function() {
if($('nav').attr('class', 'navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

但两项都没有效果

Answer 1

只需将两个图片添加到源代码中，然后根据navbar-shrink类显示/隐藏相应的图片。

<div class="nav">
  <img class="white-image" ... />
  <img class="dark-image" ... />
</div>


.nav .white-image { display:none; }
.nav .dark-image  { display:block; }
.nav.navbar-shrink .white-image { display: block; }
.nav.navbar-shrink .dark-image  { display: none; }

否则，您需要将src更改逻辑添加到滚动事件，否则只在页面加载时调用一次。

$(document).ready(function() {
    $(window).on('scroll', function() {
      if($('nav').attr('class', 'navbar-shrink')) {
        $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
      } else {
        ...
      }
    });
});

注意，您的if语句括号{ }

周围有错误的括号

当navbar-shrink处于活动状态时更改img src

1 个答案: