在 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贡献1875条经验 获得超3个赞
<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 代码语法不正确。
添加回答
举报
0/150
提交
取消