好吧,我会尽量把这点说清楚。善良,我对 JavaScript 很陌生。
我有一个名为 nav 的 div 容器,它包含五个导航按钮,它们都并排浮动。在那个容器下,我有一个名为 underbar 的 div 容器,它只是每个导航元素下的一个纯色条。当有人将鼠标悬停在导航 div 上时,该元素下栏的颜色会发生变化。现在,我有你在下面看到的,它工作正常。
<div id="container">
<div id="nav">
<div id="one" onmouseover="document.getElementById('ubone').style.background='gray'" onmouseout="document.getElementById('ubone').style.background='white';"><a href="one.html">One</a> </div><!-- end of first nav -->
<div id="two" onmouseover="document.getElementById('ubtwo').style.background='gray'" onmouseout="document.getElementById('ubtwo').style.background='white';"><a href="two.html">Two</div><!-- end of second nav -->
<div id="three" onmouseover="document.getElementById('ubthree').style.background='gray'" onmouseout="document.getElementById('ubthree').style.background='white';"><a href="three.html">Three</div><!-- end of third nav -->
<div id="four" onmouseover="document.getElementById('ubfour').style.background='gray'" onmouseout="document.getElementById('ubfour').style.background='white';"><a href="four.html">Four</div><!-- end of fourth nav -->
<div id="five" onmouseover="document.getElementById('ubfive').style.background='gray'" onmouseout="document.getElementById('ubfive').style.background='white';"><a href="five.html">Five</div><!-- end of fifth nav -->
</div><!-- end of nav div -->
<div id="underbar">
<div id="ubone"></div><!-- end of first nav -->
<div id="ubtwo"></div><!-- end of second nav -->
<div id="ubthree"></div><!-- end of third nav -->
<div id="ubfour"></div><!-- end of fourth nav -->
<div id="ubfive"></div><!-- end of fifth nav -->
</div><!-- end of underbar div -->
</div><!-- end of container div-->
这很好用,是的。但是,我绝对讨厌不得不一一编辑这些的想法。使用 javascript 函数/jquery(最好)同时能够为多个 div id 进行简化的最简单方法是什么?想法/意见?谢谢!