jquery 常用的tabs效果代码

1.引入百度cdn  jQuery 库

<script language="javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>

2. html部分 

<div class="c4">
<div class="c4t">
<ul>
<li><a><span style="font-family: Arial, Helvetica, sans-serif;">导航一</span></a> </li>
<li><a><span style="font-family: Arial, Helvetica, sans-serif;">导航二</span></a> </li>
<li><a>导航三</a> </li>
</ul>
</div>
<div class="c4c">
<div class="c4cimgs1">
<ul>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src=".0/img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
</ul>
<div class="clear"></div>
</div>
<div class="c4cimgs1" style="display:none;">
<ul>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
</ul>
<div class="clear"></div>
</div>
<div class="c4cimgs1" style="display:none;">
<ul>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src=".0/img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
<li><img src="./img/ry2.jpg" /></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
3.js代码 
<script>
$(function () {
//$(".c1a2 .yydt li").eq(0).show().siblings().hide();
$(".c4t ul li").mouseover(function () {
var index = $(this).index();
$(this).addClass('tabs').siblings().removeClass('tabs');
$(".c4c .c4cimgs1").eq(index).show().siblings().hide();
})
})
</script>