javascript - 更改多个 div 背景 onclick 、 onmouseout 和 onmouseover

Question

我在这里的一个元素中工作了 30 多个小时，我可能无法正常思考。

这是我的情况。我基本上有 4 个 div，它们根据鼠标操作以不同的方式改变它们的背景。

我们在这里将这些 div 称为 div_1、div_2、div_3 和 div_4。

当用户将鼠标移到菜单上的按钮上时，div_1 和 div_2 应该将它们的背景更改为与按钮相关的背景。

当用户点击一个按钮时，所有 4 个 div 都应该改变它们的背景并保持它，即使用户将鼠标移到别处也是如此。

您需要想象的最后一种情况是用户单击一个按钮，然后将鼠标移到另一个按钮上。在这种情况下，div_1 和 div_2 仍会发生变化，但如果用户从菜单中移除鼠标，div_1 和 div_2 应返回到与 div_3 和 div_4 相同背景相关的背景。

如果有人能帮助我了解我的代码有什么问题，我将不胜感激。谢谢。

这是我的代码:

        <ul>
            <li id="menu-a1" onclick="Menu('a1','click');" onmouseover="('a1','over');" onmouseout="Menu('a1','out');" > <a href="#">Menu_a1</a> </li>
            <li id="menu-a2" onclick="Menu('a2','click');" onmouseover="('a2','over');" onmouseout="Menu('a2','out');" > <a href="#">Menu_a2</</a> </li>
            <li id="menu-a3" onclick="Menu('a3','click');" onmouseover="('a3','over');" onmouseout="Menu('a3','out');" > <a href="#">Menu_a3</</a> </li>

        </ul> 

 <div id=div_1></div>
 <div id=div_2></div>
 <div id=div_3></div>
 <div id=div_4></div>

这是我的 java 脚本:

function Menu(where, action) {

switch (action) {

    case 'click':
        if ($('#menu-'+where).hasClass('active')) {
            ClearMenu();
            $('#menu-'+where).removeClass('active');                
        } else {
            $('#menu-'+where).addClass('active');
            ClearMenu();
            ActiveMenu(where);
        }
        break;

    case 'over':
        ActiveMenu(where);
        OverMenu(where);
        break;

    case 'out':
        ActiveMenu(where);
        break;


default: break; 
}

}

 function ClearMenu(){
// Removing Classes
$('#div_1').removeClass('a1 a2 a3');
$('#div_2').removeClass('a1 a2 a3');
$('#div_3').removeClass('a1 a2 a3');
$('#div_4').removeClass('a1 a2 a3');

 function OverMenu(where){
$('#div_1').addClass(where);
$('#div_2').addClass(where);
}

 function ActiveMenu(where){
// Adding Classes
$('#div_1').addClass(where);
$('#div_2').addClass(where);
$('#div_3').addClass(where);
$('#div_4').addClass(where);
}

这是我的 CSS:

#div_1.a1 {background:url(background_div1_a1.jpg)}
#div_1.a2 {background:url(background_div1_a2.jpg)}
#div_1.a3 {background:url(background_div1_a3.jpg)}


#div_2.a1 {background:url(background_div2_a1.jpg)}
#div_2.a2 {background:url(background_div2_a2.jpg)}
#div_2.a3 {background:url(background_div2_a3.jpg)}


#div_3.a1 {background:url(background_div3_a1.jpg)}
#div_3.a2 {background:url(background_div3_a2.jpg)}
#div_3.a3 {background:url(background_div3_a3.jpg)}


#div_4.a1 {background:url(background_div4_a1.jpg)}
#div_4.a2 {background:url(background_div4_a2.jpg)}
#div_4.a3 {background:url(background_div4_a3.jpg)}

Answer 1

在您的 OverMenu 函数中，您将 'where' 放在引号中，大概您想要引用函数参数而不是字符串？去掉这里的引号。

此外，您的 CSS 是错误的:您不能只给它一个文件名并期望它知道要做什么，您必须设置 background-image 属性:

#div_1.a1 { background-image: url(background_div1_a1.jpg); }

此外，在 HTML 的 onmouseover 位中，您实际上并未调用函数。大概你想要 Menu 在这里。

更新:

我会为此使用 jQuery。我在 jsFiddle 上做了一个例子 - http://jsfiddle.net/GrahamClark/gLGUQ/4/ - 希望这足以让您入门。