文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用js更改类名来更改导航栏图标的颜色？

问如何使用js更改类名来更改导航栏图标的颜色？
EN

Stack Overflow用户

提问于 2020-07-18 02:34:22

回答 1查看 198关注 0票数 0

我不熟悉javascript，但我想更改导航栏图标的颜色。现在，我的导航栏是黑色和白色导航栏图标。当我滚动页面时，我的导航栏将背景颜色更改为白色，字体颜色更改为黑色。但是，导航栏图标仍然是白色的，所以当我滚动页面时，它会消失。我可以通过将navbar类从'navbar-dark‘更改为'navbar-light’来解决这个问题。但是，我不确定如何使用javascript来做到这一点。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
      .navbar{
        background-color: black !important;
      }
      div.navbar.scrolled {
        background-color: white !important;
      }
       div.navbar.scrolled .navbar-brand{
        color: black !important;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container-fluid">
        <div class="navbar navbar-dark navbar-expand-md fixed-top">
          <a class="navbar-brand" href="#">Brand</a>
          <button
            class="navbar-toggler"
            data-toggle="collapse"
            data-target="#uniqueIdentifier"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div id="uniqueIdentifier" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Skills</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content" style="height:200vh;"></div>
    </header>
    <script>
      $(window).scroll(function() {
        $("div.navbar").toggleClass('navbar-dark');
        $("div.navbar").toggleClass('navbar-light');


        $("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 200);
      });
    </script>
  </body>
</html>

javascript

html

css

bootstrap-4

navbar

回答 1

Stack Overflow用户

发布于 2020-07-18 02:52:04

您可以根据滚动位置来切换深色和浅色

$("div.navbar").toggleClass('navbar-light', $(this).scrollTop() > 200).toggleClass('navbar-dark', $(this).scrollTop() <= 200);

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
      .navbar{
        background-color: black !important;
      }
      div.navbar.scrolled {
        background-color: white !important;
      }
       div.navbar.scrolled .navbar-brand{
        color: black !important;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container-fluid">
        <div class="navbar navbar-dark navbar-expand-md fixed-top">
          <a class="navbar-brand" href="#">Brand</a>
          <button
            class="navbar-toggler"
            data-toggle="collapse"
            data-target="#uniqueIdentifier"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div id="uniqueIdentifier" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Skills</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content" style="height:200vh;"></div>
    </header>
    <script>
      $(window).scroll(function() {
        $("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 200);
        $("div.navbar").toggleClass('navbar-light', $(this).scrollTop() > 200).toggleClass('navbar-dark', $(this).scrollTop() <= 200);
      });
    </script>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62959944

复制

相似问题

问如何使用js更改类名来更改导航栏图标的颜色？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用js更改类名来更改导航栏图标的颜色？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用js更改类名来更改导航栏图标的颜色？
EN