首頁猿問導(dǎo)航欄折疊時(shí)如何更改類？

導(dǎo)航欄折疊時(shí)如何更改類？

JavaScript

Helenr 2023-01-06 15:25:07

在 Web 開發(fā)方面，我對 Javascript 還很陌生。我正在使用引導(dǎo)程序來構(gòu)建導(dǎo)航欄。我的導(dǎo)航欄在展開時(shí)看起來不錯，但在折疊時(shí)，設(shè)計(jì)就亂七八糟了。我的代碼看起來像這樣 <!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>當(dāng)導(dǎo)航欄折疊我的登錄時(shí)，注冊按鈕出現(xiàn)在折疊的導(dǎo)航欄菜單內(nèi)的一行中，但我希望它們顯示為單獨(dú)的導(dǎo)航欄鏈接，就像主頁鏈接一樣，并松開 btn 類。我試過編寫以下js腳本，但沒有產(chǎn)生預(yù)期的效果。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貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

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

</button>

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

</li>

</ul>

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

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

</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% 完美，因?yàn)槲椰F(xiàn)在正在做的是改變BOOTSTRAP STYLE 這對于 ui 來說是一個(gè)很大的否定。

你現(xiàn)在正在做的是你想通過使用 bootstrap 的幫助來制作一個(gè)導(dǎo)航欄。使用 bootstrap 可以很容易地創(chuàng)建一個(gè) naybar 但很難根據(jù)你的需要設(shè)置樣式。我的建議是了解更多有關(guān)基本 CSS 和 javascript 的知識，然后再試一次。

并且您的 javascript 代碼語法不正確。

反對回復(fù) 2023-01-06