javascript - 将菜单项链接到同一页面，但显示不同的 div

Question

我正在尝试将三个菜单项链接到同一页面，根据我单击的内容显示不同的 div。

在这个页面中，我有一个下拉菜单，菜单的每个选项都显示一个特定的 div 并隐藏其他的。单击菜单项后，应该发生的是：

1. 打开页面
2. 显示正确的下拉菜单选项
3. 显示与所选选项相关的 div。

这里是链接页面中输入的下拉菜单的代码。

HTML

<select id="test" name="form_select" onchange="showDiv(this)">
<option value="hidden_div1">Show div 1</option>
<option value="hidden_div2">Show div 2</option>
<option value="hidden_div3">Show div 3</option>
<option value="hidden_div4">Show div 4</option>
</select>

<div id="hidden_div1">This is hidden div 1</div>
<div id="hidden_div2">This is hidden div 2</div>
<div id="hidden_div3">This is hidden div 3</div>
<div id="hidden_div4">This is hidden div 4</div>

CSS

div[id*="hidden_div"] {
  display: none;
}

JAVASCRIPT

// When the page loads, make sure the already selected div is shown.
window.onload = function afterPageIsLoaded() {
    showDiv();
}

function showDiv(element) {
    // Create an array of all the hidden divs elements.
    const hiddenDivs = [...document.querySelectorAll("div[id*='hidden_div']")];

    // Loop over them and hide every one of them.
    hiddenDivs.map(hiddenDiv => hiddenDiv.style.display = 'none');

    // Get the selected id from the select.
    const id = document.getElementById('test').value;

    // Get the selected div and display it.
    document.getElementById(id).style.display = 'block';
}

（这是相关的小提琴（https://jsfiddle.net/5pemtkh8/4/））

非常感谢。

标签： javascripthtmlcssdrop-down-menu