html+css+jquery tabs切换，左右切换和普通切换联合

html代码

<div class="zy_nav">
     <img src="左边未选中点击的图片" alt="" class="lnav">
     <img src="右边未选中点击的图片" alt="" class="rnav">
                            </div>
                            <ul class="zj_nav">
                                <li class="cur"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <div class="rhcj_nr">
                                <div class="rhcj_xnr cur">
                                </div>
<div class="rhcj_xnr cur">
                                </div>
<div class="rhcj_xnr cur">
                                </div>
<div class="rhcj_xnr cur">
                                </div>
                             </div>

css代码

.lnav{
  position: relative;
  left: -162px;
  top: 184px;
}
.lnav:hover{
  background: url(左边已选中点击的图片) no-repeat;
}
.rnav{
  position: relative;
  left: 923px;
  top: 184px;
}
.rnav:hover{
  background: url(右边已选中点击的图片) no-repeat;
}
.zj_nav li{
  position: relative;
  top: -200px;
  left: -23px;
  cursor: pointer;
  list-style-type: none;
  width: 171px;
  height: 46px;
  float: left;
  background: url(backgroud-position的nav的整个背景图片路径) no-repeat;
}
.zj_nav li:nth-of-type(1){
  background-position: 0 -47px;
}
.zj_nav li:nth-of-type(1).cur,.zj_nav li:nth-of-type(1):hover{
  background-position: 0 0;
}
.zj_nav li:nth-of-type(2){
  background-position: -180px -47px;
}
.zj_nav li:nth-of-type(2).cur,.zj_nav li:nth-of-type(2):hover{
  background-position: -180px 0;
}
.zj_nav li:nth-of-type(3){
  background-position: -360px -47px;
}
.zj_nav li:nth-of-type(3).cur,.zj_nav li:nth-of-type(3):hover{
  background-position: -360px 0;
}
.zj_nav li:nth-of-type(4){
  background-position: -540px -47px;
}
.zj_nav li:nth-of-type(4).cur,.zj_nav li:nth-of-type(4):hover{
  background-position: -540px 0;
}
.zj_nav li:nth-of-type(5){
  width: 146px;
  background-position: -720px -47px;
}
.zj_nav li:nth-of-type(5).cur,.zj_nav li:nth-of-type(5):hover{
  background-position: -720px 0;
}
.rhcj_xnr{
  overflow: hidden;
  width: 873px;
  height: 549px;
  // background-color: red;
  position: relative;
  top: -167px;
  overflow: auto;
  display: none;

}
.rhcj_xnr.cur{
  display: block;
}

jq代码

$('.lnav').on('click',function(){
        $(".zj_nav li").eq(rhcjIndex-1).addClass("cur").siblings('li').removeClass('cur');
        $('.rhcj_xnr').eq(rhcjIndex-1).addClass("cur").siblings('div').removeClass('cur');
        rhcjIndex=rhcjIndex-1;
        if(rhcjIndex==-1){
            rhcjIndex=4
        }
    });
    $('.rnav').on('click',function(){
        $(".zj_nav li").eq(rhcjIndex+1).addClass("cur").siblings('li').removeClass('cur');
        $('.rhcj_xnr').eq(rhcjIndex+1).addClass("cur").siblings('div').removeClass('cur');
        rhcjIndex=rhcjIndex+1;
        if(rhcjIndex>4){
            rhcjIndex=0
            $(".zj_nav li").eq(0).addClass("cur").siblings('li').removeClass('cur');
            $('.rhcj_xnr').eq(0).addClass("cur").siblings('div').removeClass('cur');
        }
    });
var rhcjIndex=0;
    $(".zj_nav li").on('click',function(){
        var index = $(this).index()
        rhcjIndex=index;
        // alert(index)
        $(this).addClass('cur').siblings('li').removeClass('cur');
        $('.rhcj_xnr').eq($(this).index()).addClass("cur").siblings('div').removeClass('cur');
        // $('.rhcj_xnr').eq($(this).index()).slideLeftHide(1000);
        // $('.rhcj_xnr').eq($(this).index()).slideLeftShow(1000);
    });