我想要做的是，當我們單擊錨標記時，它將轉到 page2.html 并更改特定 div 的背景顏色。
（錨標簽在其 href 中有一個 url&id 以重定向到新頁面但在特定部分。）
page1.html
<html>
<body>
<a href="/page2.html#color1">yellow</a>
<a href="/page2.html#color2">green</a>
<a href="/page2.html#color3">blue</a>
</body>
</html>
page2.html
<html>
<body>
<div id="color1">
<p>yellow</p>
</div>
<div id="color2">
<p>green</p>
</div>
<div id="color3">
<p>blue</p>
</div>
</body>
</html>
我嘗試使用類似
（page1.html）的功能
<a href="/page2.html#color1" onclick="changecolor()">yellow</a>
<script>
function changecolor() {
document.getElementById(color1).style.background = "yellow";
}
</script>
我嘗試了更多這樣的功能，但它們都不起作用！
是否可以只使用javascript來做到這一點？
誰能幫我？？
uj5u.com熱心網友回復：
恕我直言，最好的解決方案應該是不要使用 onclick 事件，因為它不會觸發腳本來更改另一個尚未加載的站點上的樣式。
因此，我建議在第二頁上運行腳本并用于window.location.href獲取 url。
然后您可以使用 Switch-Statements 來應用如下更改：
var url = window.location.href,
div = document.getElementById('id');
switch (url) {
case /page2.html#color1:
div.style.background = "yellow";
break;
case /page2.html#color2:
div.style.background = "green";
break;
case /page2.html#color3:
div.style.background = "blue";
break;
}
uj5u.com熱心網友回復：
我認為最好聽 hashchange 事件，然后只操作所需的元素 css
<body id="someId">
<a href="./page2.html#yellow">yellow</a>
<a href="./page2.html#green">green</a>
<a href="./page2.html#blue">blue</a>
</body>
<script>
window.addEventListener('hashchange', (event) => {
const color = window.location.hash.replace('#', '')
document.getElementById('someId').style.background = color
});
</script>
uj5u.com熱心網友回復：
您需要將 id 放在雙引號中，例如document.getElementById("color1").style.background = "yellow"
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439712.html
標籤：javascript html jQuery css 引导程序 4