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');            })        }    });});