jQuery选项卡切换图片效果代码实例
本章节分享一段代码实例，它实现了选项卡式的图片切换效果。
也就是点击顶部选项卡实现图片切换效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:1024px;
height:768px;
margin:0 auto;
}
ul{
width:1024px;
height:40px;
margin:0;
padding:0;
}
ul li{
width:254px;
line-height:40px;
border-bottom:solid 2px #FB066F;
text-align:center;
list-style-type:none;
float:left;
margin-right:2px;
background:#fff;
}
ul li.hover_css{
border-bottom:solid 2px #06F;
background:#f0f0f0;
}
p{
margin:0;
padding:0;
text-align:center;
padding-top:20px;
}
</style>
<script src="/wp-content/uploads/front-end-tutorial/error.html">风景</li>
<li big="img/2.jpg">美女</li>
<li big="img/3.jpg">帅锅</li>
<li big="img/4.jpg">恶搞</li>
</ul>
<p><img src="img/1.jpg" /></p>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.hoverFn($("ul li"),"hover_css",$("p img"),"big"),调用此函数，此函数的作用会在下面介绍。
（3）.function hoverFn(obj,hc,content,url){}，此方法可以实现注册事件处理函数效果，第一个参数规定要注册处理函数的元素，第二个参数是class样式类名称，第三个参数规定p元素的img元素，第三个参数是选项卡li元素的big属性。
（4）.obj.hover(function(){
var h_css=hc;
$(this).addClass(h_css).siblings().removeClass(h_css);
var imgUrl=$(this).attr(url);
content.attr("src",imgUrl);
})，首先将样式类名称赋值给你变量h_css。
为当前鼠标悬浮的li元素添加此样式类，然后其他的兄弟元素删除此样式类。
然后获取当前li元素的big属性值，其实也就是一个图片的url。
然后将p元素中的img图片链接地址换成上面获取的url地址。
二.相关阅读:
（1）.hover事件可以参阅jQuery hover事件一章节。
（2）.addClass()方法可以参阅jQuery addClass()一章节。
（3）.siblings()方法可以参阅siblings()方法一章节。
（4）.removeClass()方法可以参阅jQuery removeClass()一章节。
（5）.attr()方法可以参阅jQuery attr()一章节。