如上图所示的一个折面板效果+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什么的,如有需求,可以私聊我,源码奉上!!!!!!! 

jq 折面板+tab切换(自己封装的插件哦!!)的更多相关文章

  1. jq 版的tab切换

    ta切换是在前端中非常常见的一种效果,网上的效果很多.但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用. var tabs = function (tab, c ...

  2. jquery TAB切换小插件

    //tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...

  3. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. 封装tab切换事件

    HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...

  6. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

  8. tab切换效果

    选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...

  9. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

随机推荐

  1. P2765 魔术球问题

    P2765 魔术球问题 贪心模拟就可以过.........好像和dinic没啥关系   找找规律发现可以贪心放.n又灰常小. 设答案=m 你可以$O(mn)$直接模拟过去 闲的慌得话可以像我用个$se ...

  2. P3690 【模板】Link Cut Tree (动态树)

    P3690 [模板]Link Cut Tree (动态树) 认父不认子的lct 注意:不 要 把 $fa[x]$和$nrt(x)$ 混 在 一 起 ! #include<cstdio> v ...

  3. Spring Boot(十二):spring boot如何测试打包部署

    Spring Boot(十二):spring boot如何测试打包部署 一.开发阶段 1,单元测试 在开发阶段的时候最重要的是单元测试了,springboot对单元测试的支持已经很完善了. (1)在p ...

  4. MD5算法详解

    MD5是什么 message-digest algorithm 5(信息-摘要算法).经常说的“MD5加密”,就是它→信息-摘要算法.在下载一下东西时,经常在一些压缩包属性里,看到md5值.而且这个下 ...

  5. openvpn server setup

    Set Up an OpenVPN Server client access 内部环境搭建

  6. Python3.6.2在线安装pymysql模块

    我是一个python新手刚才使用python写邮件发送代码的时候想着需要连接数据库, 下面的安装步骤 python -m pip install pymysql PS C:\Users\hp> ...

  7. Stanford CS231n实践笔记(课时14卷积神经网络详解 上)

    本课我们主要来研究一个"浏览器中的卷积神经网络" 这只是一个展示项目,但是能够帮助直观地看到一些东西 地址:https://cs.stanford.edu/people/karpa ...

  8. PreparedStatement与Statement区别

    就这牛客网的一道题,进行分析PreparedStatement与Statement的区别. 题目: 关于PreparedStatement与Statement描述错误的是() A 一般而言,Prepa ...

  9. topcoder srm 698 div1 -3

    1.定义重复串$S=T+T$,即$S$可以表示成一个串的叠加.给定一个串$s$,可以通过删除字符.修改字符.增加字符来使得其变为重复串.问最少的次数. 思路:首先将$s$分成个串$s_{0},s_{1 ...

  10. Vue学习【第六篇】:Vue-cli脚手架(框架)与实战案例

    环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --registry=https://re ...