引入jq：<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

html：

<div id="acc">

            <ul>

                <li class="active">

                    <h3 class="active">标题1</h3>

                    <div><img src="bg1.jpg"></div>

                </li>

                <li>

                    <h3>标题2</h3>

                    <div><img src="bg2.jpg"></div>

                </li>

                <li>

                    <h3>标题3</h3>

                    <div><img src="bg3.jpg"></div>

                </li>

                <li>

                    <h3>标题4</h3>

                    <div><img src="bg4.jpg"></div>

                </li>

                <li class="last">

                    <h3>标题5</h3>

                    <div><img src="bg5.jpg"></div>

                </li>

            </ul>

        </div>

<!--分割线-->

css:

<style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            img{

                border: none;

                display: block;

            }

                #acc {

                    width: 640px;

                    height: 140px;

                    

                    margin: 0 auto;

                }

                #acc ul  {

                    border-left:1px solid #ddd ;

                    height: 140px;

                    position: relative;

                }

                #acc ul li {

                    width:50px;

                    height: 138px;

                    border: 1px solid #ddd;

                    float: left;

                    list-style: none;

                    border-left: 0;

                    position: relative;

                    overflow:hidden;

                }

                #acc ul li.active {

                    width: 434px;

                    

                }

                #acc ul li h3 {

                    font-size: 14px;

                    color: #000;

                    font-weight:100;

                    width: 14px;

                    height: 98px;

                    padding: 40px 18px 0;

                    

                }

                #acc ul li h3.active {

                    background: #f42760;

                    color: #fff;

                

                }

                #acc ul li  div {

                    width: 383px;

                    height: 138px;

                    background: blue;

                    position: absolute;

                    top: 0;

                    left: 50px;

                    border-left:1px solid #ddd ;

                    z-index:0;

                }

                #acc ul li img{

                    width: 383px;

                    height: 138px;

                    

                }

                #acc ul li.last {

                    position: absolute;

                    top: 0;

                    right: 0;

                }

                

        </style>

<!--分割线-->

jquery：

<script type="text/javascript">

            //.find()这个函数是找出正在处理的元素的后代元素的好方法

            //.end()回到最近的一个"破坏性"操作之前。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作

            $(function(){

                $("#acc li").mouseover(function(){

                    $(this).stop().animate({"width":"434px"},500).find("h3").addClass("active").end()

                    .siblings().stop().animate({"width":"50px"},500).find("h3").removeClass("active")

                })

            })

        </script>