jquery 滑动门特效

tab切换特效 适合的 菜单和内容数量相等

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="http://www.xiangcloud.com.cn/js/jquery-1.7.1.min.js"></script>
<style type="text/css">
    .solution_menu{
        overflow: hidden;
        margin-bottom: 129px;
        padding-top: 45px;
    }
     .solution_menu ul{
         width: 165px;
     }
     .solution_menu ul li{
        width: 131px;
         height: 47px;
         text-align: center;
         line-height: 47px;
         border-radius: 10px;
         position: relative;
         display: block;
    }
     .solution_menu ul li.active{
         color:#fff;
         background: #36a1f1;
     }
    /*content_block*/
     .content_list{
        width: 1030px;
         border: 1px solid #40a7f0;
         border-radius: 10px;
         background: #fff;
    }
    #fangan_list_style1 div.current{
        display: block;
    }
    #fangan_list_style1 .fangan_c{
        display: none;
    }
    .left{
        float: left;
    }

</style>
<div class="solution_menu">
    <ul class="left" id="fangan_menu_style1">
        <li class="active">互联网金融</li>
        <li class="solution_p">保险.证券</li>
        <li class="solution_p">电商 O2O</li>
        <li class="solution_p">政务云</li>
        <li class="solution_p">交通行业</li>
        <li class="solution_p">在线医疗</li>
    </ul>

    <div class="content_list left" id="fangan_list_style1">
        <div class="fangan_c current" >

           111111111111111


        </div>
        <div class="fangan_c">


          22222222222222



        </div>

        <div class="fangan_c">
           33333333333333333333
        </div>

        <div class="fangan_c">
            444444444444444444444
        </div>

        <div class="fangan_c">

           5555555555555555

        </div>
        <div class="fangan_c">
           6666666666666666
        </div>


    </div>

    <script type="text/javascript">

        $(function(){

            $('#fangan_menu_style1 li').mouseover(function(){

                var liindex = $('#fangan_menu_style1 li').index(this);
                $(this).addClass('active').siblings().removeClass('active');
                $('#fangan_list_style1 div.fangan_c').eq(liindex).fadeIn(150).siblings('#fangan_list_style1 .fangan_c').hide();

            });



        });



    </script>

</div>
</body>
</html>

　

JS代码

  $(function(){

            $('#fangan_menu_style1 li').mouseover(function(){

                var liindex = $('#fangan_menu_style1 li').index(this);
                $(this).addClass('active').siblings().removeClass('active');
                $('#fangan_list_style1 div.fangan_c').eq(liindex).fadeIn(150).siblings('#fangan_list_style1 .fangan_c').hide();

            });



        });

　　

　

posted @ 2016-01-25 11:56  星耀学园  阅读(444)  评论(0)    收藏  举报