合并 2 个 JS 脚本 - 老派

Merge 2 JS scripts - old school

本文关键字：老派 脚本 JS 合并      更新时间：2023-09-26

我无法弄清楚将 2 个小而简单的 JS 脚本合并到一个页面上的一个脚本中。这是一个鼠标悬停表选择脚本，用于更改单元格的颜色。老派，我知道，但有时对某些事情非常方便。但是现在，我无法弄清楚以正确的方式合并它。我在互联网上找不到它。此处设置了一个测试页面：http://www.efens.nl/demo/000javascripttest.htm 请参阅源代码。

我错过了什么？ 

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=' ';
}
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;
}
<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>

>你可以简单地使用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;
}

在此处查看示例

相关文章：