实现步骤:
1、创建对应切换div
<div class="bottom_daohang"> <div class="bottom_daohang_zong"> <div class="bottom_daohang_left value_left ace"><</div> <div id="bianse1" class="bottom_daohang_number ace red value_number" bs="1">1</div> <div id="bianse2" class="bottom_daohang_number ace value_number" bs="2">2</div> <div id="bianse3" class="bottom_daohang_number ace value_number" bs="3">3</div> <div id="bianse4" class="bottom_daohang_number ace value_number" bs="4">4</div> <div id="bianse5" class="bottom_daohang_number ace value_number" bs="5">5</div> <div id="bianse6" class="bottom_daohang_number ace value_number" bs="6">6</div> <div id="bianse7" class="bottom_daohang_number ace value_number" bs="7">7</div> <div id="bianse8" class="bottom_daohang_number ace value_number" bs="8">8</div> <div id="bianse9" class="bottom_daohang_number ace value_number" bs="9">9</div> <div id="bianse10" class="bottom_daohang_number ace value_number" bs="10">10</div> <div id="bianse11" class="bottom_daohang_number ace value_number" bs="11">11</div> <div class="bottom_daohang_right value_right ace">></div> </div> </div>
关键:自定义属性“bs”,方便匹配
2、创建自定义class
/*第一模块追加CLASS*/ .red{ background: #A3EFE2!important; }
使div能够对应切换颜色
3、实现对应div显示后,对应的下方导航div切换颜色
//下方导航栏第一模块显示隐藏 function addEvent_3(){ $(".value_number").click(function(){ var aaa=$(this).attr(‘bs‘);//追加自定义属性(属性值为数字方便获取对应id名称) $(".value_zhu").css("display","none");//先将所有的div都隐藏 if(aaa == 0){ $("#zhuanhuan1").css("display","block");//让第一个div页面加载便显示出来 }else if(aaa != 0){ $("#zhuanhuan"+aaa).css("display","block");//字符串拼接获得相应id名称,从而相匹配 $(".value_number").removeClass(‘red‘);//移除掉所有自定义class名称 $("#bianse"+aaa).addClass(‘red‘);//添加自定义class名称,达到元素相匹配效果 } }) }
4、实现上一页下一页跳转
上一页
//第一模块上一页 function addEvent_4(){ $(".value_left").click(function(){ var bbb=+$(".red").attr(‘bs‘);//得到获得class名称的元素的自定义属性值(数字) var ccc=bbb-1;//获得上一元素的自定义属性值(数字) $(".value_zhu").css("display","none"); if(bbb == 1){ $("#zhuanhuan1").css("display","block");//让第一个div显示 }else if(bbb > 1&& bbb <= 11){ $("#zhuanhuan"+ccc).css("display","block");//字符串拼接得到上一元素的id值让它显示 $(".value_number").removeClass(‘red‘);//移除所有自定义class值 $("#bianse"+ccc).addClass(‘red‘);//对应元素追加class } }) }
//第一模块下一页 function addEvent_5(){ $(".value_right").click(function(){ var ddd=+$(".red").attr(‘bs‘); var eee=ddd+1; $(".value_zhu").css("display","none"); if(ddd >= 1&& ddd <11){ $("#zhuanhuan"+eee).css("display","block"); $(".value_number").removeClass(‘red‘); $("#bianse"+eee).addClass(‘red‘); }else if(ddd == 11){ $("#zhuanhuan11").css("display","block"); } }) }
关键:利用自定义的数字属性,字符串拼接找到对应的div,从而达到同步的效果
实现效果:
原文:https://www.cnblogs.com/Ace-suiyuan008/p/9280301.html