jquery选项卡点选切换图片 点选按钮切换不同图片来回切换

用JQUERY实现，点选不同选项卡显示不同图片功能

HTML代码：

<div class="nav content">
    <ul class="clearfix nav">
    <li class="actv">路飞</li>
    <li>索罗</li>
    <li>罗宾</li>
    <li>娜美</li>
    <li>乌索普</li>
    </ul>
<div class="img">
<img class="tive" src="http://imgsrc.baidu.com/forum/pic/item/8ce23bc79f3df8dc20386c84cd11728b47102848.jpg">
<img  src="http://imgsrc.baidu.com/forum/pic/item/373e49540923dd54a108227dd109b3de9c82485e.jpg">
<img  src="http://imgsrc.baidu.com/forum/pic/item/707994eef01f3a29c6c250db9925bc315c607c4f.jpg">
<img  src="http://imgsrc.baidu.com/forum/pic/item/2c3b0924ab18972be14e85dfe6cd7b899e510a58.jpg">
<img  src="http://imgsrc.baidu.com/forum/pic/item/922b1d950a7b02080cbebaf462d9f2d3572cc85a.jpg">
</div>
</div>

CSS代码：

<style type="text/css">
*{margin: 0;padding:0 ;box-sizing: border-box;}
.content{width:800px;height:900px;margin: 0 auto;overflow: hidden;}
ul,li{list-style: none;}
.clearfix:after{clear:both;content: "";display:block;}
li{float:left;width:160px;height: 100px;text-align: center;line-height: 100px;background-color: yellow;border:1px solid red;font-size: 24px;}
.actv{background: blue;}
.img{position:relative;width:800px;height:800px;}
.img img{width:800px;height:800px;position: absolute;left: 0;top: 0;display: none;}
.img .tive{display: inline;}
</style>

JS代码：

<script type="text/javascript">
$(function(){
function goWhat(n){
 $('.nav li').eq(n).on('click',function(){
                 $(this).addClass('actv').siblings('li').removeClass('actv')
                 Show(n);
});
}
function Show(n){
$('.img img').eq(n).show(1000).siblings('img').hide(1000);
}
for(var i=0;i<5;i++){
goWhat(i);
 
}
})
</script>