合并2个JS脚本 - 旧学校

Question

我无法弄清楚将两个小而简单的JS脚本合并到一个页面上的一个脚本中。它是一个MouseOver表选择脚本来更改单元格的颜色。老学校，我知道，但有时候非常方便。但现在，我无法弄清楚是否以正确的方式合并它。我无法在互联网上找到它。在此处设置测试页面：http://www.efens.nl/demo/000javascripttest.htm请参阅源代码。

我错过了什么？

＆＃13;

＆＃13;

function selectlink(currentmenu,linkmenu){
    currentmenu.style.background='yellow';

    if (document.getElementById)
      document.getElementById("selectmenu").innerHTML=linkmenu;
    else
      selectmenu.innerHTML=html;
}
function leavelink(currentmenu){
    currentmenu.style.background='blue';

    if (document.getElementById)
      document.getElementById("selectmenu").innerHTML=' ';
    else
      selectmenu.innerHTML=' ';
}



function selectlink(currentblok,linkblok){
    currentblok.style.background='blue';

    if (document.getElementById)
      document.getElementById("selectblok").innerHTML=linkblok;
    else
      selectblok.innerHTML=html;
}
function leavelink(currentblok){
    currentblok.style.background='yellow';

    if (document.getElementById)
      document.getElementById("selectblok").innerHTML=' ';
    else
      selectblok.innerHTML=' ';
}

＆＃13;

td.menu {font-family:Arial;
        font-weight:bold;
        background-color:blue;
        cursor:hand
}
td.blok {font-family:Arial;
        font-weight:bold;
        background-color:yellow;
        cursor:hand
}

a{
    text-decoration:none;
    color:black;
}

＆＃13;

<div id="menu">
<table width=200>
<tr>
    <td class="menu" 
        bordercolor="black"
        id="choice1"
        onmouseover="selectMenu(this,'AAA')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">AAA</a>
    </td>
</tr>
<tr>
    <td class="menu" 
        bordercolor="black"
        id="choice2"
        onmouseover="selectMenu(this,'BBB')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">BBB</a>
    </td>
</tr>
<tr>
    <td class="menu"  
        bordercolor="black"
        id="choice3"
        onmouseover="selectMenu(this,'CCC')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.org/">CCC</a>
    </td>
</tr>
    <td class="menu" 
        bordercolor="black"
        id="choice4"
        onmouseover="selectMenu(this,'DDD')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectMenu" size="2"></font>
    </td>
</tr>
</table></div>
<p><font size="2">MouseOver:&nbsp;&nbsp; &nbsp;Blue to Yellow (return to Blue)</font></p>
<p>===================================================================</p>
<p>&nbsp;</p>
<div id="blok">
<table width=200 id="table2">
<tr>
    <td class="blok" bordercolor="black"
        id="choice5"
        onmouseover="selectlink(this,'AAA')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">AAA</a>
    </td>
</tr>
<tr>
    <td class="blok" bordercolor="black"
        id="choice6"
        onmouseover="selectlink(this,'BBB')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">BBB</a>
    </td>
</tr>
<tr>
    <td class="blok" bordercolor="black"
        id="choice7"
        onmouseover="selectlink(this,'CCC')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.org/">CCC</a>
    </td>
</tr>
    <td class="blok" bordercolor="black"
        id="choice8"
        onmouseover="selectlink(this,'DDD')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectdesc0" size="2"></font>
    </td>
</tr>
</table></div>
<p><font size="2">MouseOver:&nbsp; Yellow to Blue (return to Yellow)</font></p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需使用css的hover选择器即可。

示例：

<a href="#" class="yellowtoblue">Yellow To Blue</a>
<br>
<br>
<a href="#" class="bluetoyellow">Blue To Yellow</a>

CSS：

.yellowtoblue{
    text-decoration:none;
    color:black;

    background-color:yellow;
}
.yellowtoblue:hover{
     background-color:blue;

}

.bluetoyellow{
    text-decoration:none;
    color:black;

    background-color:blue;
}
.bluetoyellow:hover{
     background-color:yellow;

}

Check Out Example Here