我认为我非常接近解决方案，但遇到了一些问题。我创建了一个导航菜单，它使用 javascript for onmouseover 更改元素样式。对于 onmousedown，我想重置与部分 ID 匹配的 div 的所有样式（导航菜单内部和外部），然后为单击的“导航”div 和导航菜单之外的相关“内容”div 设置新样式。
换句话说，我有多个 div（nav1、nav2、nav3 等以及 content1、content2、content3 等），我想根据常见的字符串（“nav”和“content”）定位它们。
这是基本的html框架：
<div id="midColumn">
<div id="nav1"
onmouseover = "slideIn('slide1')"
onmousedown = "display(this, 'content1')"
onmouseout = "slideOut('slide1')"
>
INTERACTIONS<span id="hiddenText"> are . . .</span>
</div>
<div id="nav2"
onmouseover = "slideIn('slide2')"
onmousedown = "display(this, 'content2')"
onmouseout = "slideOut('slide2')"
>
CONSTRUCTIONS<span id="hiddenText"> are . . .</span>
</div>
<div id="nav3"
onmouseover = "slideIn('slide3')"
onmousedown = "display(this, 'content3')"
onmouseout = "slideOut('slide3')"
>
DECONSTRUCTIONS<span id="hiddenText"> are . . .</span>
</div>
</div>
<div id="rightColumn">
<div id="content1"><img src="Django.jpg" width="400px"></div>
<div id="content2"><img src="Django.jpg" width="500px"></div>
<div id="content3"><img src="Django.jpg" width="700px"></div>
以下 javascript 几乎可以工作，但只有第一个 nav 和 content div 受 querySelector 影响：
function display(div, contentId){
var divIDKeyword = document.querySelector('[id^="nav"]');
var contentIDKeyword = document.querySelector('[id^="content"]');
divIDKeyword.style.color = 'black';
divIDKeyword.style.backgroundColor = 'white';
contentIDKeyword.style.display= 'none';
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}
然后我尝试了这个，但也许我犯了一个错误，因为在这种情况下没有任何效果：
function display(div, contentId){
var navIdFind=”nav”
var navString = document.getElementsByTagName('input'), navPartialId;
for (var i = 0; i < navString.length; ++i) {
if (navString[i].name.indexOf(navIdFind)!=-1) {
navPartialId = navString[i].id;
document.getElementById(navPartialId).style.color = 'black';
document.getElementById(navPartialId).style.backgroundColor = 'white';
}
}
var contentIdFind=”content”
var contentString = document.getElementsByTagName('input'), contentPartialId;
for (var i = 0; i < contentString.length; ++i) {
contentPartialId = contentString[i].id;
document.getElementById(contentPartialId).style.display= 'none';
}
}
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}
我希望找到一个高效、优雅的解决方案，尽可能减少和简化 javascript。提前致谢。