zoukankan      html  css  js  c++  java
  • 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>

    效果图:

  • 相关阅读:
    「四步接入」开启秀场直播,揭秘七牛云互动直播解决方案
    【直播预告】揭秘互动直播,技术咖携手美女主播解读直播背后那点事儿
    初识k8s(基础概念加历史了解)(一)
    Linux lsof命令的使用示例
    Linux netstat:查看网络状态
    Linux uname命令:查看系统和内核相关信息
    系统环境变量PATH的设置与查看,以Mac为例
    Shell echo命令
    Linux which命令
    【转译】每个Python开发者都应该掌握的8种数据结构
  • 原文地址:https://www.cnblogs.com/heyiming/p/6519316.html
Copyright © 2011-2022 走看看