为了账号安全,请及时绑定邮箱和手机立即绑定

导航栏折叠时如何更改类?

导航栏折叠时如何更改类?

Helenr 2023-01-06 15:25:07

在 Web 开发方面,我对 Javascript 还很陌生。我正在使用引导程序来构建导航栏。我的导航栏在展开时看起来不错,但在折叠时,设计就乱七八糟了。我的代码看起来像这样


    <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>E-Commerce</title>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="stylesheet" href="css/main.css">

</head>

<body>


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

      <a class="navbar-brand" href="">E-Commerce</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>


      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">

            <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>

          </li>

        </ul>

        <div class='form-inline my-2 my-lg-0'>

            <a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>

            <a href="" class="btn btn-warning change-style">Login</a>

            <a href=""><img id="cart-icon" src="" alt="cart"></a>

            <p id="cart-total">0</p>

        </div>

      </div>

    </nav>

</body>

</html>


当导航栏折叠我的登录时,注册按钮出现在折叠的导航栏菜单内的一行中,但我希望它们显示为单独的导航栏链接,就像主页链接一样,并松开 btn 类。我试过编写以下js脚本,但没有产生预期的效果。


var toggleButton = document.getElementsByClassName("navbar-toggler");

toggleButton[0].addEventListener("click", () => {

  var buttons = document.getElementsByClassName("change-style");

  for (i = 0; i < buttons.length; i++) {

    buttons[i].className = "nav-link";

  }

});

有人可以帮忙吗?


查看完整描述

2 回答

?
翻过高山走不出你

TA贡献1609条经验 获得超2个赞

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <a class="navbar-brand" href="">E-Commerce</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>


  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>

      </li>

    </ul>

    <div class='form-inline my-2 my-lg-0'>

        <a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>

        <a href="" class="btn btn-warning change-style">Login</a>

        <a href=""><img id="cart-icon" src="" alt="cart"></a>

        <p id="cart-total">0</p>

    </div>

  </div>

</nav>

对于 CSS


 #cart-icon {

  width: 25px;

  display: inline-block;

  margin-left: 15px;

}


.bg-dark {

  background-color: #4f868c !important;

}


#cart-total {

  display: block;

  text-align: center;

  background-color: red;

  color: #fff;

  border-radius: 50%;

  font-size: 14px;

  width: 20px;

  height: 25px;

}


@media only screen and (max-width: 600px){

  .btn{

    display: block;

    margin-bottom: 1rem;

    float: left;

  }

  

  .form-inline{

    flex-direction: column;

    align-items: flex-start;

  }

}

我希望这将是您想要的效果。我知道我的回答通常不是 100% 完美,因为我现在正在做的是改变BOOTSTRAP STYLE 这对于 ui 来说是一个很大的否定。


你现在正在做的是你想通过使用 bootstrap 的帮助来制作一个导航栏。使用 bootstrap 可以很容易地创建一个 naybar 但很难根据你的需要设置样式。我的建议是了解更多有关基本 CSS 和 javascript 的知识,然后再试一次。


并且您的 javascript 代码语法不正确。


查看完整回答
反对 回复 2023-01-06
?
繁花如伊

TA贡献1766条经验 获得超12个赞

您必须确保您的样式具有响应性,并且一旦达到特定的高度和宽度,您就可以为您的类或标签设置一堆额外的样式。



查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信