JQuery learning notes for image flip effect and TAB switch effect page 1/2

Therefore, I also learned how to convert the previous JavaScript code into JQuery, which ensures both the Code clarity and the versatility of the Code, because it is a beginner, there are many shortcomings in the Code. please correct me more :)
1. DW provides the image flip function, but it is easy to use. Previously, the writing method was troublesome and the code was messy. It can be made clearer after JQuery transformation. The core code is as follows:
JS Code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
<! --
$ (Document). ready (function (){
$ ("# Nav li a img"). mouseover (function (){
Var m = $ (this). attr ("src ");
If (m. indexOf ("On") <0 ){
Var n = m. split (".");
Var f = n [0] + "_ On ";
Var nf = f + "." + n [1];
$ (This). attr ("src", nf );
}
});
$ ("# Nav li a img"). mouseout (function (){
Var m = $ (this). attr ("src ");
If (m. indexOf ("On")> = 0 & $ (this). attr ("class ")! = "Active "){
Var n = m. split (".");
Var f = n [0]. substring (0, n [0]. length-3 );
Var nf = f + "." + n [1];
$ (This). attr ("src", nf );
}
});
});
// -->
</Script>

The HTML section is as follows:
Copy codeThe Code is as follows:
<Div id = "Menu">
<Ul id = "Nav">
<Li> </li>
<Li> <a href = "#"> </a> </li>
<Li> </li>
<Li> <a href = "#"> </a> </li>
<Li> </li>
<Li> <a href = "#"> </a> </li>
<Li> </li>
<Li> <a href = "#"> </a> </li>
<Li> </li>
<Li> <a href = "#"> </a> </li>
<Li> </li>
<Li> <a href = "#"> </a> </li>
<Li> </li>
</Ul>
</Div>

Bytes