JQuery学习笔记实现图片翻转效果和TAB标签切换效果

为了保证前台页面的整洁，我们习惯性地将CSS放入一个单独的.CSS文件中以便调用，而JS也同样可以放到单独的JS文件中去，并且页面上的事件如onclick，onmouseover也可以分离出来，现在网上比较流行JQuery

所以自己也下了一个来学习，把之前写的几个JS代码都转换成JQuery，既能保证代码的清晰，也保证了代码的通用性，真是一举两得啊，由于是初学者，所以代码有许多的不足，还请大家多多指正：）
1、实现图片翻转效果，DW本身提供了这个功能，不过还是自己写的好用，呵呵。之前写的方式比较麻烦，代码也比较乱，用JQuery改造后可以使其更加清晰，核心代码如下：
JS代码

复制代码代码如下:

Copy after login

HTML部分如下：

复制代码代码如下:

Copy after login

这里需要注意的是未翻转的图片名为没有_On，部分，如Menu_Home.gif，而翻转图片的图片名带_On，如Menu_Home_On.gif

2、JQuery实现Tab标签写换效果，这个比较常用到，之前用JS写的代码依旧很乱，而且代码没有分离开，改造后部分代码如下：
JS代码：

复制代码代码如下:

Copy after login

HTML代码：

复制代码代码如下:

标题一

标题二

标题三

标题四

内容三

Copy after login

CSS代码：

复制代码代码如下:

#Contents{ width:318px; height:125px; border-top:1px #d1d1d1 solid; border-right:1px #d1d1d1 solid; border-bottom:1px #d1d1d1 solid; color:#d1d1d1; } .Tab_Off{ width:132px; height:30px; background-color:#ebebeb; vertical-align:middle; line-height:30px; color:#373737; border-bottom:1px #f6f6f6 solid; border-top:1px #f6f6f6 solid; border-left:1px #ededed solid; border-right:1px #d1d1d1 solid; } .Tab_On{ width:132px; height:30px; background-color:#FFFFFF; vertical-align:middle; line-height:30px; color:#696969; border-top:1px #dbdbdb solid; border-bottom:1px #dbdbdb solid; border-left:1px #dbdbdb solid; border-right:1px #FFFFFF solid; }

Copy after login

最后附一张效果：