我為我的網站制作了一個導航欄，但我希望能夠通過在 JS 中編輯一些代碼來更新我網站上的所有導航欄。請注意，我對 JS 的了解非常差，而且我承認用 JavaScript 可能做不到。這是 HTML 代碼。nav { list-style-type: none; background-color: lightblue; border: 1px solid black; width: fit-content; height: min-content; position: fixed;}nav li { float: left;}nav img { height: 47px; display: block; margin-left: auto; margin-right: auto;}nav li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-family: -apple-system; background-color: lightblue;}nav li a:hover { background-color: blue; color: white;}nav .nohover:hover { color: white;}<nav class="container"> <li><img src="image" class="navimg"></li> <li><a href="website1">website1</a></li> <li><a href="webite2">website2</a></li> <li><a href="website3">website3</a></li></nav>這些信息將會非常有幫助。如果您知道該怎么做，請告訴我。
2 回答
米琪卡哇伊
TA貢獻1998條經驗 獲得超6個贊
對我來說，不太清楚你想要什么，但如果你想更改鏈接，你可以使用它。我還為a標簽提供了一個類，以便我可以使用 JQuery 代碼調用它們！
編輯： 我們是一個幫助您解決編碼問題的社區，而不是為您編寫整個代碼。因此，請在回答 StackOverflow 上的下一個問題時牢記這一點。
編輯2：我保留css了代碼，因為它不相關。
$(document).ready(function() {
$('.link1').parent().html('<a class="link1" href="changed1">changed1</a>');
$('.link2').parent().html('<a class="link2" href="changed2">changed2</a>');
$('.link3').parent().html('<a class="link3" href="changed3">changed3</a>');
// if you want to add a new item to the end
$('li:last').append('<li><a class="link4" href="changed4">changed4</a></li>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="container">
<li><img src="image" class="navimg"></li>
<li><a class="link1" href="website1">website1</a></li>
<li><a class="link2" href="webite2">website2</a></li>
<li><a class="link3" href="website3">website3</a></li>
</nav>
慕虎7371278
TA貢獻1802條經驗 獲得超4個贊
刪除 HTML 部分并在 js 文件中添加以下代碼。您所要做的就是編輯 menuArray。只需填充您想要的數量即可。
var menuArray = ['website1', 'website2', 'website3']
var navdiv = document.createElement("div");
navdiv.setAttribute('class', 'container')
var ul = document.createElement("ul");
menuArray.forEach((ele) => {
var li = document.createElement("li");
li.innerHTML = ele
ul.appendChild(li)
})
navdiv.appendChild(ul)
document.body.prepend(navdiv);
- 2 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消