我正在嘗試將 onclick 功能添加到我發現的精美下拉選單模板中，以便當您從選單中進行選擇時，會為 img 選擇新的源和 alt 標簽以顯示不同的狗品種。
原始未修改代碼在這里https://codepen.io/sean_codes/pen/WdzgdY和我的 mod 嘗試如下。我沒有包括我修改后的 ccs，因為它很大并且與原始檔案沒有太大區別。我知道選單項已被淘汰，但由于某種原因，這種配置似乎仍然適用于多個瀏覽器。
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="pets.css" />
<script src="pets.js"></script>
</head>
<body>
<div >
<nav >
<menu>
<menuitem>
<a>Pet Selection</a>
<menu>
<menuitem>
<a>Breed</a>
<menu>
<menuitem>
<a>Dog</a>
<menu>
<menuitem id="german_shepherd" onclick="german_shepherd_select"><a>German Shepherd</a></menuitem>
<menuitem id="golden_retriever" onclick="golden_retriever_select"><a>Golden Retriever</a></menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
</menu>
</nav>
<img class ="petselection" id ="pet_selection_img" src="" alt="將 js onclick 功能添加到 html menuitem 下拉選單">
</div>
</body>
</html>
JS
// Pet Selection Commands
function german_shepherd_select() {
document.getElementById("pet_selection_img").src = "german_shepherd.png";
document.getElementById("pet_selection_img").alt = "This is a German Shepherd";
}
function golden_retriever_select() {
document.getElementById("pet_selection_img").src = "golden_retiever.png";
document.getElementById("pet_selection_img").alt = "This is a Golden Retriever";
}
uj5u.com熱心網友回復：
您只是()在呼叫 Javascript 函式時錯過了：
<menuitem id="german_shepherd" onclick="german_shepherd_select()">
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359308.html
標籤：javascript css 落下 菜单项
下一篇：如何讓html元素像文本一樣流動