jQuery实现选项卡切换功能(web移动端)

功能预览.png

1.不多说，直接上代码。选项卡静态样式直接使用WE-UI控件，
切换效果用JQuery实现。
body中:

  
  

   

    

     选项一
    
    

     选项二
    
    

     选项三
    
   
   


   
  

2.外部js文件中

//选项卡切换
 $(".check_1").click(function() {
  $(".check_1").addClass("weui-bar__item_on");
  $(".check_2").removeClass("weui-bar__item_on");
  $(".check_3").removeClass("weui-bar__item_on");
  $("#check_1_text").css("color","#5DC2AD");
  $("#check_2_text").css("color","black");
  $("#check_3_text").css("color","black");
 });

 $(".check_2").click(function() {
  $(".check_2").addClass("weui-bar__item_on");
  $(".check_1").removeClass("weui-bar__item_on");
  $(".check_3").removeClass("weui-bar__item_on");
  $("#check_1_text").css("color","black");
  $("#check_2_text").css("color","#5DC2AD");
  $("#check_3_text").css("color","black");
 });
 
 $(".check_3").click(function() {
  $(".check_3").addClass("weui-bar__item_on");
  $(".check_1").removeClass("weui-bar__item_on");
  $(".check_2").removeClass("weui-bar__item_on");
  $("#check_1_text").css("color","black");
  $("#check_2_text").css("color","black");
  $("#check_3_text").css("color","#5DC2AD");
 });