每次做项目基本都有侧栏导航样式,相对简单的样式,以后也方便改写。
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'); }) } }); });