javascript - 简单的javascript问题-onMouseOver div背景更改

Question

我用了this代码来制作一个导航，其中 onMouseOver，相邻 div 的背景更改为相应的图像。

但是，我修改了代码以反射(reflect)我需要的多个导航按钮。这可能是我出错的地方。另外，我正在 Sitemaker CMS 的 ColdFusion 环境中工作。这也可能是一个问题。

这是代码。

<script>
function changeStyle1() {
document.getElementById('banners').style.backgroundImage = url('images/banners/contractingbanner.jpg');
}
function changeStyle2() {
document.getElementById('banners').style.backgroundImage = url('images/banners/procurementbanner.jpg');
}
function changeStyle3() {
document.getElementById('banners').style.backgroundImage = url('images/banners/distributionbanner.jpg');
}
function changeStyle4() {
document.getElementById('banners').style.backgroundImage = url('images/banners/printingbanner.jpg');
}
function changeStyle5() {
document.getElementById('banners').style.backgroundImage = url('images/banners/custompacksbanner.jpg');
}
function changeStyle6() {
document.getElementById('banners').style.backgroundImage = url('images/banners/businessdevelopmentbanner.jpg');
}
function changeStyle7() {
document.getElementById('banners').style.backgroundImage = url('images/banners/sustainabilitybanner.jpg');
}
function changeStyleBack() {
document.getElementById('banners').style.backgroundImage = url('images/banners/laundrybanner.jpg');
}</script>

<小时/>

<div id="banners">
&nbsp;
</div>
<ul id="nav">
<li><a id="contractingservices" href="body.cfm?id=1" onmouseover="changeStyle1()"; onmouseout="changeStyleBack()">Contracting Services</a></li>
<li><a id="procurement" href="body.cfm?id=1" onmouseover="changeStyle2()"; onmouseout="changeStyleBack()" >Procurement &amp; Data Management</a></li>
<li><a id="distribution" href="body.cfm?id=1" onmouseover="changeStyle3()"; onmouseout="changeStyleBack()">Distribution</a></li>
<li><a id="printing" href="body.cfm?id=1" onmouseover="changeStyle4()"; onmouseout="changeStyleBack()" >Printing</a></li>
<li><a id="laundry" href="body.cfm?id=1">Laundry</a></li>
<li><a id="custompacks" href="body.cfm?id=1" onmouseover="changeStyle5()"; onmouseout="changeStyleBack()" >Custom Packs</a></li>
<li><a id="businessdevelopment" href="body.cfm?id=1" onmouseover="changeStyle6()"; onmouseout="changeStyleBack()" >Business Development</a></li>
<li><a id="sustainability" href="body.cfm?id=1" onmouseover="changeStyle7()"; onmouseout="changeStyleBack()" >Sustainability</a></li>

如何修复此代码以使其可运行或找到另一个 JavaScript 或 jQuery 解决方案？我搜索了又搜索才找到了几十个相同div的JS背景更改器(mutator)，它们可以很容易地用CSS复制。

Answer 1

也许你可以做这样的事情(例如使用 jQuery):

var styles = {
  'style-1': 'images/banner/....png',
  'style-2': 'images/banner/....png',
  // And so on...
}

function change_style(id)
{
  // Here you should check if 'id' is a valid style id
  // and if everything looks great,
  $('#banners').css('background-image', styles[id]);
}

并更新您的 <a />标签来调用此函数并传递预期的样式