<!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切换与内容伸展闭合的结合的更多相关文章

  1. vue仿淘宝订单状态的tab切换效果

    <div class="navigation">  //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...

  2. 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...

  3. 封装tab切换事件

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

  4. 纯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 ...

  5. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  6. 谷歌内核浏览器 iframe内容的 tab切换 滚动条消失

    问题: 新版本的-webkit- 内核浏览器 在tab切换时,iframe 内容区 丢失滚动条 如下图 (虽然滚动条位置还在,可以垂直滚动,但滚动条不见了) 解决思路: 让iframe重新计算宽高,重 ...

  7. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  8. vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容）

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  9. VUE实现Studio管理后台（二）：Slot实现选项卡tab切换效果，可自由填装内容

    作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...

随机推荐

  1. windows10安装pycharm，以及pycharm教程和破解码

    pycharm下载请点我 根据自己的情况选择安装目录 下面我们选择"64位安装"(根据自己的系统来选择),并勾上".py",如图所示: 一定要拉到最后才行  p ...

  2. jetSonNano darknet ubdefined reference to 'pow',undefined reference to 'sqrtf'....

    我在用CMakelist编译工程时,遇到了这个一连串基础数学函数找不到的问题,如下图所示: 我当时在工程中明明引用了 #include "math.h"头函数,这是因为你的工程在预 ...

  3. sqlite3 on python for newbies

    python 集成了 sqlite3 ,其接口很简单: import sqlite3 db_connection = sqlite3.connect(db_filename) db_cursor = ...

  4. localhost、127.0.0.1、本机ip、0.0.0.0 的区别

    1.各个地址 绑定到127.0.0.1的服务只能被本机访问. localhost是个域名,一般指向127.0.0.1这个ip,绑定到localhost的服务也只能被本机访问. 本机地址,指的是本机物理 ...

  5. 获取浏览区变化的方法resize() 方法

    当调整浏览器窗口的大小时,发生 resize 事件. resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数. <html> <head> ...

  6. [CSP-S模拟测试]:树（树上上升序列+主席树+线段树）

    题目传送门(内部题78) 输入格式 第一行输入两个整数$n,q$,表示节点数和询问数. 第二行输入$n$个整数$w_i$,表示第$i$个点的智商. 第三行至第$n+1$行每行输入两个数$x,y$,表示 ...

  7. [CSP-S模拟测试]:木叶下（图论）

    题目传送门(内部题77) 输入格式 第一行一个整数$n$,表示原先的树的点数接下来$n-1$行每行两个整数$a,b$,表示原先的树上的$n-1$条边,保证这$n-1$条边形成一棵树. 接下来一行一个整 ...

  8. Java操作数据库之JDBC增删改查

    1.java连接MySql数据库 代码区域: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  9. postgresql_action

    SELECT * FROM x123_area a LEFT JOIN x123_user_task_brief utb ON utb.ref_area_code = a.area_code WHER ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_18-练习三_按指定格式打印集合的方法

    主要锻炼用集合作为参数 使用if判断语句