前端js分享⼀个以张html多个⼩页⾯切换的⼀个我推演的⽅法实际使⽤中可能会出现⼀个页⾯上出现多个页⾯根据按钮不同分别展⽰不同页⾯的功能，此处分享⼀个我⾃⼰根据kv结构推演的实⽤函数
为了书写⽅便此处使⽤了jquery
为了适应⼀个页⾯中有多组跳转的情况，此处进⾏了额外的kv扩展，进⾏了不同的active样式的扩展
如果出现多个页⾯之间包含切换，建议还是每⼀组都有⾃⼰单独的显⽰kv,  (⾃⼰测试得出来的结论)
//多个页⾯切换的函数//注意不要有多余的点 eg: acti.ve 是不被允许的，允许 active 或者 .active
//demo  $(".user_k").click(function(){clickExchangeUI(".user_k",".user_v")});
//      $(".new_k").click(function(){clickExchangeUI(".new_k",".new_v",".right_k",".right_v","active")});
// 其中 user_k 是按钮 user_v 是按钮对应的页⾯，这两个class是⼀对kv结构的唯⼀标识，每⼀对需要显⽰的都要有⼀对kv
// current_k current_v 是当前已经显⽰的⼀对kv结构，页⾯初始化时，必须要带上，不然会不到元素,⽆法设置display:none
/
/ assign_k assign_v 是指定的⽤于显⽰当前活动的kv，默认情况是 current_k current_v
// customActive 指明当前激活按钮或者其他元素上(K)是否需要添加 active 样式，默认是添加 active 样式的.
function clickExchangeUI(key,val,assign_k="",assign_v="",customActive="active"){
if($(key).hasClass("current_k")) return;
else{
if(assign_k.length>0){
$(assign_k).place(".",""));
$(assign_v).css({"display":"none"});
$(assign_k).removeClass(place(".",""));
$(assign_v).removeClass(place(".",""));
$(key).addClass(place(".",""));
$(val).addClass(place(".",""));
//console.log("11111111");
}else{
$(".current_k").place(".",""));
$(".current_v").css({"display":"none"});
$(".current_k").removeClass("current_k");
$(".current_v").removeClass("current_v");
$(key).addClass("current_k");
$(val).addClass("current_v");css和html和js怎么结合
//console.log("222222");
}
$(key).place(".",""));
$(val).css({"display":""});
}
}
//测试demo
//修改两个按钮
$(".user1_k").click(function(){clickExchangeUI(".user1_k",".user1_v",".current1_k",".current1_v");});
$(".device1_k").click(function(){clickExchangeUI(".device1_k",".device1_v",".current1_k",".current1_v");});
//新增两个按钮
$(".user2_k").click(function(){clickExchangeUI(".user2_k",".user2_v",".current2_k",".current2_v");});
$(".device2_k").click(function(){clickExchangeUI(".device2_k",".device2_v",".current2_k",".current2_v");});
//切换新增切换修改
$(".new_k").click(function(){clickExchangeUI(".new_k",".new_v",".right_k",".right_v");});
$(".modify_k").click(function(){clickExchangeUI(".modify_k",".modify_v",".right_k",".right_v");});
具体的html关键代码如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。