微发微积之jQuery放上去切换

　　首先看张效果图吧！

　　实现的效果就是鼠标放到右边的标题上，左边就切换下显示相应的内容。

<div class="topCnt_l">
        <ul>
            <li class="undis">
            </li>
            <li class="undis">
            </li>
            <li>
           </li>
            <li class="undis">
           </li>
        </ul>
    </div>

    <div class="topCnt_r">
        <ul>
            <li>
            </li>
            <li>
           </li>
            <li>
            </li>
            <li>
            </li>
        </ul>
    </div>

就是鼠标放到下ul下的li上，上面的ul显示相应的li里的内容。
jQuery代码如下：

$(function () {
    $(".topCnt_r>ul>li").mouseover(function () {//当鼠标放到下ul下的li上时事件
        var number = $(this).index();//获得是放在第几个li上
        $(".topCnt_l>ul>li").eq(number).siblings().hide();//把上面ul的相应的li的兄弟元素隐藏起来
        $(".topCnt_l>ul>li").eq(number).show();//把上面ul的相应的li元素显示出来
    });
});

有错误之处请大家指出来，特别感谢artwl对我的上两篇水文的指教。