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相同背景的背景。

如果有人能帮我理解我的代码错误，我将不胜感激。 TNX。

这是我的代码：

        <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/ - 希望这足以让你开始。

更改多个div背景onclick，onmouseout和onmouseover

1 个答案: