导航栏折叠时如何更改类？
在 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";
}
});
有人可以帮忙吗？
Helenr2回答
-
翻过高山走不出你
<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 代码语法不正确。 -
繁花如伊
您必须确保您的样式具有响应性，并且一旦达到特定的高度和宽度，您就可以为您的类或标签设置一堆额外的样式。
随时随地看视频慕课网APP
相关分类
JavaScript