Question

我认为我非常接近解决方案，但遇到了一些问题。我创建了一个导航菜单，使用javascript为onmouseover更改元素样式。对于onmousedown，我想重置与部分ID匹配的div的所有样式（导航菜单内部和外部），然后是单击的“nav”div的新样式以及导航菜单外的相关“content”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">&nbsp;are . . .</span>
</div>
<div id="nav2" 
onmouseover = "slideIn('slide2')" 
onmousedown = "display(this, 'content2')"
onmouseout = "slideOut('slide2')"
>
CONSTRUCTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
<div id="nav3" 
onmouseover = "slideIn('slide3')" 
onmousedown = "display(this, 'content3')" 
onmouseout = "slideOut('slide3')"
>
DECONSTRUCTIONS<span id="hiddenText">&nbsp;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。提前谢谢。

Answer 1

尝试定位部分ID的Intead，只需向所有部分添加类。例如，对于

<div id="content1"></div>
<div id="content2"></div>
<div id="content1"></div>

......成功：

<div id="content1" class="content"></div>
<div id="content2" class="content"></div>
<div id="content1" class="content"></div>

并将CSS中的那组ID称为：

.content {color:#999999;back.........etc.....}

这将简化你所拥有的一切，就像你想要的那样。希望这有帮助

javascript - 按部分ID重置所有div的样式，然后是样式特定的div

1 个答案: