Copy codeThe Code is as follows:
<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>
<Html>
<Head>
<Style type = "text/css">
*{
Text-align: center;
Font-size: 12px;
}
Table {
Border-collapse: collapse;
Width: 40%;
}
Table tr td {
Border: red solid 1px;
Line-height: 20px;
}
. Myclass,. mystu {
Display: none;
}
. Myclass table tr td,. mystu table tr td
{
Border-top: solid 0px red;
}
</Style>
// Import the JQuery package
<Script type = "text/javascript" src = "js/jquery-1.8.3.js"> </script>
// Write the JQuery event control page
<Script type = "text/javascript">
$ (Function (){
// Event injection point
$ ("# P1"). mouseover (function (){
$ (". Myclass"). show ("slow ");
$ (". Mystu"). hide ();
Certificate (this).css ("background-color", "# ccff99 ");
$ ("# P2" ).css ("background-color", "# ffffff ");
});
$ ("# P2"). mouseover (function (){
$ (". Mystu"). show ("slow ");
$ (". Myclass"). hide ();
Certificate (this).css ("background-color", "# ccff99 ");
$ ("# P1" ).css ("background-color", "# ffffff ");
});
});
</Script>
</Head>
<Body>
<Div class = "mytop">
<Table align = "center">
<Tr>
<Td id = "p1"> class management </td>
<Td id = "p2"> Student Management </td>
</Tr>
</Table>
</Div>
<Div class = "myclass">
<Table align = "center">
<Tr>
<Td> class id </td>
<Td> class name </td>
<Td> remarks </td>
</Tr>
<Tr>
<Td> A1331 </td>
<Td> Java </td>
<Td> excellent </td>
</Tr>
<Tr>
<Td> A1332 </td>
<Td> Java Web </td>
<Td> excellent </td>
</Tr>
</Table>
</Div>
<Div class = "mystu">
<Table align = "center">
<Tr>
<Td> NO. </td>
<Td> name </td>
<Td> gender </td>
<Td> class </td>
</Tr>
<Tr>
<Td> 100 </td>
<Td> Cheng Bowen </td>
<Td> male </td>
<Td> A1339 </td>
</Tr>
<Tr>
<Td> 101 </td>
<Td> Hu Xiaoli </td>
<Td> female </td>
<Td> A1339 </td>
</Tr>
</Table>
</Div>
</Body>
</Html>