jquery手风琴横向滑动Tab切换简单实现

实现一个简单的jQuery实现的横向手风琴效果Tab切换，废话不多说直接上代码。

一定要去jquery官网下载jquery.min.js,引入进去。http://www.ab173.com/jquery/​​​​​​​

一：效果如图

HTMl代码：

<div class = "container"
        <ul class = "list1">
                <li>
                        <a class = "link1">
                                <strong>日</strong>
                                <span>今日生产机会</span>
                        </a>
                </li>
                <li>
                        <a class = "link2">
                                <strong>日</strong>
                                <span>今日生产机会</span>
                        </a>
                </li>
                <li>
                        <a class = "link3">
                                <strong>日</strong>
                                <span>今日生产机会</span>
                        </a>
                </li>
        </ul> 
</div>
<div class = "product">
        <div class = "wraper">111</div>
        <div class = "wraper">222</div>
        <div class = "wraper">333</div>

</div>

二：CSS代码：

.container {width: "500px"; position: "relative";}
.container ul {width: "500px"; height: "30px"; position: "relative"; margin:0; padding:0}
.container ul li{float: "left"; background: "f0f0f0"; height: "30px;"}
.container ul li a {width: "30px"; line-height: "30px"; display: "inline-block"; background: "8e8e8e"; text-aligh: "center";}
.container li span{width: "100px"; position: "absolute"; display: "inline"; line-height: "30px";}
.container ul li.active{position: "relative"; width:"130px"; } 
.container ul li.active span{display: "inline-block";}
.container ul li span{display: "none";}
.container .link1{background: #ff7979;}
.container .link2{background: #90d0ff;}
.container .link3{background: #a9df8b;}
.product{width: "300px"; height: "100px";}
.product .wraper{background: "#f0f0f0";}

 三:jQuery代码

<script>
$list_li = $(".container .list1 li");
$list_li.eq(0).addClass("active");
$(".product .wraper").eq(0).css("display", "block").siblings().hide();
$list_li.mouseover (function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".product .wraper").eq($(this).index()).show().siblings().hide();
)};
</script>