jQuery分类菜单竖直切换代码

每次做项目基本都有侧栏导航样式，相对简单的样式,以后也方便改写。

html:

<!--内容区域 start-->
<div class="conter">
    <div class="conter-box">

       <!--这是左边的导航-->
        <div class="conter-box_l">
            <div>
                <ul class="sy">
                    <li class="current">精品美食</li>
                    <li>美容美发</li>
                    <li>开心购物</li>
                    <li>生活一查通</li>
                </ul>
            </div>
        </div>

        <!--这是右边对应的内容-->
        <div class="conter-box_r">

            <!--导航一内容-->
            <div class="content">
                <ul class="by" style="display: block">
                    <li class="by-li li-on">宫保鸡丁</li>
                    <li class="by-li">酱牛肉</li>
                    <li class="by-li">北京烤鸭</li>
                    <li class="by-li">酸菜鱼</li>
                </ul>
            </div>

            <!--导航二内容-->
            <div class="content">
                <ul class="by">
                    <li class="by-li li-on">精剪</li>
                    <li class="by-li">面膜保湿</li>
                    <li class="by-li">去痘抗痘</li>
                    <li class="by-li">化妆品</li>
                </ul>
            </div>
            <!--导航三内容-->
            <div class="content">
                <ul class="by">
                    <li class="by-li li-on">超市购物</li>
                    <li class="by-li">商场购物</li>
                </ul>
            </div>

            <!--导航四内容-->
            <div class="content">
                <ul class="by">
                    <li class="by-li li-on">地图</li>
                    <li class="by-li">充值话费</li>
                    <li class="by-li">58同城</li>
                </ul>
            </div>
        </div>
    </div>
</div>

css:

 .conter-box {
     width: 100%;
     min-height: 4em;
     background: #fff;
     border-top: 0.1em solid #ccc;
 }
 .conter-box_l {
     width: 40%;
     background: #f2f2f2;
     float: left;
 }

 .conter-box_r {
     width: 60%;
     float: right;
 }
 .conter-box_l ul li,.conter-box_r ul li{
     line-height: 3.2em;
     text-indent: 1em;

 }
 .by-li {
     list-style: none;
 }
 .current {
     background: #fff;
     color: #2b57ae;
 }
 .by {
     display: none;
 }

js:

$(function() {
    //竖直切换
    $(function () {
        window.onload = function () {
            var $li = $('.sy li');  //这是导航的  li标签
            var $ul = $('.content .by');//这是右边具体的内容
            $li.click(function () {    //左边的导航点击事件触发
                var $this = $(this);   //声明变量指向当前点击的对象
                var $t = $this.index();  //获取当前的点击对象  的下标
                $li.removeClass();
                          $this.addClass('current');
                          $ul.css('display', 'none');
                          $ul.eq($t).css('display', 'block');
            })
        }
    });
});