zoukankan      html  css  js  c++  java
  • jq 折面板+tab切换(自己封装的插件哦!!)

    如上图所示的一个折面板效果+tab切换;最重要的js代码如下:

    对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条; Arrow 这个是箭头的div;hot_wrap_li_wrap 这个是要显示或隐藏的div

    //筛选出bol=false并且不是点击当前的这个的div,把控制显示隐藏的bol改成true 

    function Initialization(index){
      $.each($(".hot_wrap_li_wrap"), function(i) {
        if($(".hot_wrap_li").eq(i).attr("bol")=="false" && index!=i){
          $(".hot_wrap_li_wrap").eq(i).hide();
          $(".Arrow").eq(i).attr("src","img/down.png");
          $(".hot_wrap_li").eq(i).attr("bol",true);
        }
      });
    }

    //这个是遍历所有的li点击控制显示隐藏
    $.each($(".hot_wrap_li"), function(i,ele) {
      $(".hot_wrap_li").eq(i).attr("bol",true);//初始化所有的bol都为true;
      $(".hot_wrap_li").eq(i).on("click",function(){
          Initialization(i);//筛选出来的全都变成true;防止下次点击出错;这里要把当前的i传到这个方法里面进行比较
          if($(".hot_wrap_li").eq(i).attr("bol")=="true"){
          $(".Arrow").eq(i).attr("src","img/up.png");
          $(".hot_wrap_li_wrap").eq(i).slideDown("slow");
          $(".hot_wrap_li").eq(i).attr("bol",false);
        }else if($(".hot_wrap_li").eq(i).attr("bol")=="false"){
          $(".Arrow").eq(i).attr("src","img/down.png");
          $(".hot_wrap_li_wrap").eq(i).slideUp("slow");
          $(".hot_wrap_li").eq(i).attr("bol",true);
        }
      })
    });

      tab切换的逻辑没贴出来,因为比较简单

      由于代码比较多,没法全贴出来,不过最重要的就是上面的这段js,其他的都是布局css什么的,如有需求,可以私聊我,源码奉上!!!!!!! 

  • 相关阅读:
    Golang之字符串格式化
    BZOJ 4513: [Sdoi2016]储能表 [数位DP !]
    BZOJ 3329: Xorequ [数位DP 矩阵乘法]
    BZOJ 1833: [ZJOI2010]count 数字计数 [数位DP]
    HDU2089 不要62 BZOJ1026: [SCOI2009]windy数 [数位DP]
    未完
    [Miller-Rabin & Pollard-rho]【学习笔记】
    BZOJ 3551: [ONTAK2010]Peaks加强版 [Kruskal重构树 dfs序 主席树]
    BZOJ 3123: [Sdoi2013]森林 [主席树启发式合并]
    BZOJ 3545: [ONTAK2010]Peaks [Splay启发式合并]
  • 原文地址:https://www.cnblogs.com/lijuntao/p/7593198.html
Copyright © 2011-2022 走看看