TAB切换与内容伸展闭合的结合
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
/*tab切换的css*/
#wrap {width:100%; margin:0 auto; overflow: hidden;}
#tit {height: 35px;width:100%;}
#tit span {float: left; height: 30px; line-height: 30px; width: 25%; font-size: 20px; text-align: center; color: #333;cursor: pointer}
#con div{display: none; height: auto; width: 100%; background: pink;font-size: 100px;line-height: 200px;}
#tit span.select {border-bottom: 3px solid #009933; color: #009933;}
#con div.show {display: block;width: 100%}
</style>
<style>
/*问题和答案所需要的css*/
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "微软雅黑";}
ul{width: 100%}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;color: #fff;}
.list{width: 100%;border-bottom:solid 1px #316a91;margin:0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_help.png) no-repeat right;}
.list ul li .inactive{ background-size:16px 27px;}
.list ul li .inactives{background:url(http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_helpbot.png) no-repeat right;}
.list ul li .inactives{background-size: 27px 16px;}
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select">TAB1</span>
<span>TAB2</span>
<span>TAB3</span>
<span>TAB4</span>
</div>
<ul id="con">
<div class="show div1"><!--装问题和答案的盒子-->
<!--第一块的问题和答案开始-->
<div class="list" style="display: block">
<ul class="yiji">
<li><a href="javascript:void(0)" class="inactive">TAB1-问题1</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB1-答案1</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" class="inactive">TAB1-问题2</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB1-答案2</a></li>
</ul>
</li>
</ul>
</div>
<!--第一块的问题和答案结束-->
</div>
<div class="div1">
<!--第二块的问题和答案开始-->
<div class="list" style="display: block">
<ul class="yiji">
<li><a href="javascript:void(0)" class="inactive">TAB2-问题1</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB2-答案1</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" class="inactive">TAB2-问题2</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB2-答案2</a></li>
</ul>
</li>
</ul>
</div>
<!--第二块的问题和答案结束-->
</div>
<div class="div1">
<!--第三块的问题和答案开始-->
<div class="list" style="display: block">
<ul class="yiji">
<li><a href="javascript:void(0)" class="inactive">TAB3-问题1</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB3-答案1</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" class="inactive">TAB3-问题2</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB3-答案2</a></li>
</ul>
</li>
</ul>
</div>
<!--第三块的问题和答案结束-->
</div>
<div class="div1">
<!--第四块的问题和答案开始-->
<div class="list" style="display: block">
<ul class="yiji">
<li><a href="javascript:void(0)" class="inactive">TAB4-问题1</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB4-答案1</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" class="inactive">TAB4-问题2</a>
<ul style="display: none">
<li class="last"><a href="javascript:void(0)">TAB4-答案2</a></li>
</ul>
</li>
</ul>
</div>
<!--第四块的问题和答案结束--> </div>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/*tab切换所需要的js*/
$(document).ready(function() {
$('.inactive').click(function(){
if($(this).siblings('ul').css('display')=='none'){
$(this).parent('li').siblings('li').removeClass('inactives');
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(100).children('li');
if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
$(this).parents('li').siblings('li').children('ul').slideUp(100); }
}else{
//控制自身变成+号
$(this).removeClass('inactives');
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(100);
/*
//控制自身子菜单变成+号
$(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
*/
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(100); //控制同级菜单只保持一个是展开的（-号显示）
$(this).siblings('ul').children('li').children('a').removeClass('inactives');
}
})
});
</script>
<script>
/*问题-答案的js*/
$('#tit span').click(function() {
var i = $(this).index();//下标第一种写法
//var i = $('tit').index(this);//下标第二种写法
$(this).addClass('select').siblings().removeClass('select');
$('#con .div1').eq(i).show().siblings().hide();
});
</script>
效果图：
TAB切换与内容伸展闭合的结合的更多相关文章
- vue仿淘宝订单状态的tab切换效果
<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...
- 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看
scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...
- 封装tab切换事件
HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- bootstrap tab切换如何让鼠标移动自动切换内容
bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...
- 谷歌内核浏览器 iframe内容的 tab切换 滚动条消失
问题: 新版本的-webkit- 内核浏览器 在tab切换时,iframe 内容区 丢失滚动条 如下图 (虽然滚动条位置还在,可以垂直滚动,但滚动条不见了) 解决思路: 让iframe重新计算宽高,重 ...
- Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容）
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- VUE实现Studio管理后台（二）：Slot实现选项卡tab切换效果，可自由填装内容
作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...
随机推荐
- java.lang.Void类源码解析_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 在一次源码查看ThreadGroup的时候,看到一段代码,为以下: /* * @throws NullPointerEx ...
- 调整数组顺序使奇数位于偶数前面（python）
题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 方法1:冒泡 O( ...
- spring boot mapper层传参数是用main的arg0（第一个参数），arg1（第二个参数）
spring boot mapper层传参数是用main的arg0(第一个参数),arg1(第二个参数) 大于三个参数,用map传递 public interface FrontMapper{ //= ...
- java浅克隆和深克隆，序列化和反序列化实现深克隆（封装序列化和反序列化操作）
本篇博客内容: 一.浅克隆(ShallowClone)和深克隆(DeepClone) 二.序列化和反序列化实现深克隆 三.封装序列化和反序列化操作 ObjectOutputStream + 内存流By ...
- PC端无论页面有没有完全撑开把footer保持在最底部（不用定位）
最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果 解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可 ...
- Solr单机环境搭建及部署
一.定义 官网的定义: Solr是基于Lucene构建的流行,快速,开放源代码的企业搜索平台.它具有高度的可靠性,可伸缩性和容错能力,可提供分布式索引,复制和负载平衡查询,自动故障转移和恢复,集中式配 ...
- git使用,Git的skil-map，git配置http/https/socks5代理
. 检出.克隆库: git clone git://git.openwrt.org/openwrt.git 2. git查看某个文件的修改历史 git log --pretty=oneline 文件名 ...
- datatbales的数据源类型(Data source types)
数据是复杂的,并且所有的数据是不一样的.因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据. 本节将讨论 DataTables 处理数据的三个核心概 ...
- MySQL高可用架构之MySQL5.7.19 PXC
CentOS7.3下Percona-XtraDB-Cluster-5.7.19集群部署PXC三节点安装:node1:10.10.10.11 node2:10.10.10.12node3:10.10.1 ...
- Powershell&TFS_Part 1
目录 目录 前言 TFS 对象模型 Powershell Powershell面向对象 Powershell默认会在PC中设置执行脚本权限 调试脚本 断点 Step Microsoft Visual ...