类似选项卡切换 翻页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | < br ><! DOCTYPE html> < html > < head > < title ></ title > < meta charset="utf-8"> < style type="text/css"> *{margin: 0;padding:0;list-style: none;} .warp{width:600px;margin: 10px auto;} .nav ul{width:500px;clear: both;overflow: hidden;} .nav ul li{width:100px;height:50px;background: #ccc;float: left;text-align: center;line-height: 50px;} .nav li.active{background: #000;color: #fff;} .con ul{width: 300px;height:100px;background:#000;} .con ul li{display: none;color: #fff;} .con ul li.active{display: block;} .btn button{width: 50px;height: 30px;margin:5px 30px;} </ style > </ head > < body > < div class="warp"> < div class="nav"> < ul > < li class="active">首页</ li > < li >列表</ li > < li >内容</ li > </ ul > </ div > < div class="con"> < ul > < li class="active">首页1</ li > < li >列表2</ li > < li >内容3</ li > </ ul > </ div > < div class="btn"> < button >上一页</ button > < button >下一页</ button > </ div > </ div > < script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></ script > < script type="text/javascript"> $(function(){ $('.nav li').click(function(){ $('.nav li').removeClass('active').eq($(this).index()).addClass('active'); $('.con li').removeClass('active').eq($(this).index()).addClass('active'); }) $('.btn button').click(function(){ var li=$('.nav li.active').index(); //首先获取菜单数量 var btn=$(this).index(); //按钮上一步 只有俩个 所以获取索引 Switch(li,btn); }) function Switch(li,btn){ if(btn==0){ //判断 按钮只有俩个0 或 1,所以当按钮索引等于0时直接等于-1 btn = -1; } var index = li+btn; //得到该附加样式的菜单以及对于的展示块的索引 if(index>$('.nav li').length-1){ //判断 索引大雨菜单长度归0,重新计算 index = 0; } if(index< 0 ){ //判断 索引小于0切换到最后一个。 index=$('.nav li').length-1; } //清除样式及对应菜单和展示块附加样式 $('.nav li').removeClass('active').eq(index).addClass('active'); $('.con li').removeClass('active').eq(index).addClass('active'); } }); </script> </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步