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

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

在这个页面中，我有一个下拉菜单，菜单的每个选项都显示一个特定的div并隐藏其他div。单击菜单项后，应执行以下操作：

打开页面

显示正确的下拉菜单选项

显示与所选选项相关的div

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

HTML

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';
}

（这是相关的提琴（））

---

非常感谢。

js小提琴怎么了？看来对meSorry很有效，我可能需要更清楚一点。fiddel工作得很好（我发布它只是为了展示下拉菜单在页面中的工作方式）。我的问题是，从网站的菜单链接到选择了特定下拉菜单选项的页面。例如：1。当我单击站点菜单上的按钮“A”时，我会加载带有下拉列表的页面，其中显示选项“hidden_div1”和相关div“hidden_div1”。2.当我点击站点菜单上的按钮“B”时，我加载了显示选项“hidden div2”和相关div“hidden_div2”的下拉列表页面。也许我很愚蠢，但要清除，你想让下拉列表项与属性类似吗？同样，您想将菜单项用作指向其他网站的可单击链接吗？不，抱歉。我不太懂英语。再次感谢。我试着恢复：在网站上有两个菜单。第一个是网站的经典菜单。第二个，是一个放置在单个页面中的下拉菜单（第二个下拉菜单运行良好，让我在同一页面中显示不同的div。票证中的代码指的是第二个菜单）。所以…我必须将常规菜单链接到下拉菜单的特定选项。

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

// 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';
}