基于jquery的选项卡嵌套二级选项卡的实现

  1. 首页
  2. 技巧,前端
  3. 正文

做为一名linux运维+PHP开发，对前端只是一知半解，但还是有兴趣的。
jquery是好东西，可是自己不熟，半桶水写原生JS，慢慢遇到浏览器各种兼容之后，才发现jquery的基本不用考虑这些。
这次是倒腾一个选项卡嵌套二级选项卡的功能，看着手册来弄。

效果如下：
QQ截图20190707210626.jpg

比如选项第一级是 明星、作家等，
如果点击明星之后，第二级是A-Z的字母，
点击A字母后，选项卡内容就都是A开头名字的明星。

选项卡标题span和和选项卡内容理论上不限数量 自由添加，但数量得一致，需要保持标题内容的一一对应，JS是自动按顺序做关联关系的，这样的好处是增加内容很方便。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <style>
        .tab-shw2019 p{ padding: 1px; margin-top: 1px;;}
        .tab-shw2019 p a{ text-decoration: none;; color: #8e8e8e;}
        .tab-shw2019 .tag-content div,.tab-shw2019 .tag-content div dd{display: none;}
        .tab-shw2019 .tag-title{ width: 100%; height: 35px; display: block; overflow: hidden;  border-bottom: 1px solid #cccccc; }
        .tab-shw2019 .tag-title span{float:left; font-size: 16px; padding-left: 5px; padding-right: 5px; height: 32px; line-height: 32px; cursor: pointer; color: #333333;}
        .tab-shw2019 .tag-title span.current,.tab-shw2019 .tag-content dt span.current{ background-color: #13df80; color: #FFFFFF; display: block;}
        .tab-shw2019 .tag-content dl{ margin: 0px; padding: 0px;}
        .tab-shw2019 .tag-content dt,.tab-shw2019 .tag-content dd {width: 100%; height: 30px; display: block; margin: 0px; padding: 0px;; overflow: hidden;}
        .tab-shw2019 .tag-content dt span{float:left; color: #CCCCCC; border: 1px solid #efefef; font-size: 14px; margin: 5px;; padding-left: 5px; padding-right: 5px; height: 22px; line-height: 22px; cursor: pointer;}
    </style>
    <body>
        <div class="tab-shw2019">
            <div class="tag-title">
                <span>明星</span>
                <span>作家</span>
                <span>工程师</span>
                <span>教师</span>
                <span>驾驶员</span>
                <span>科学家</span>
                <span>创业者</span>
            </div>
            <div class="tag-content">
                <div>
                    <dl>
                        <dt><span>A</span><span>B</span><span>C</span></dt>
                        <dd><p><a href="#">阿雅</a> <a href="#">阿杜</a> <a href="#">阿里郎</a></p></dd>
                        <dd>BBB</dd>
                        <dd>CCC</dd>
                    </dl>
                </div>
                <div><p><a href="#">CCAV</a> <a href="#">CCSV</a> <a href="#">ssAV</a></p></div>
                <div>3</div>
                <div>4</div>
                <div>
                    <dl>
                        <dt><span>A1</span><span>B1</span><span>C1</span></dt>
                        <dd>AAA111</dd>
                        <dd>BBB111</dd>
                        <dd>CCC111</dd>
                    </dl>
                </div>
                <div>6</div>
                <div>7</div>
            </div>
        </div>
        <script>
        (function(){
            $(".tag-title").children("span").each(function(key,value){                
                $(value).on("click",function(){
                    $(".tag-title").children("span").removeClass("current");
                    $(value).addClass("current");
                    $(".tag-content").children("div").css("display","none");
                    $(".tag-content").children("div").eq(key).css("display","inline");
                });
                
            });
            $(".tag-content").find("dl").each(
                function(key,value){
                    $(value).find("span").each(function(key2,value2){
                        $(value2).on("click",function(){
                            $(value).find("span").removeClass("current");
                            $(value2).addClass("current");
                            $(value).find("dd").each(function($key3,value3){
                                $(value3).css("display","none");
                            });
                            $(value).find("dd").eq(key2).css("display","inline");
                            console.log(key);
                        });
                    });
                }
            );
            //选项卡第一项自动展开
            $(".tag-title").children("span").first().click();
            $(".tag-content").find("dl").first().find("span").first().click();
        })();    
            
        </script>
    </body>
</html>

标签: jquery

非特殊说明，本博所有文章均为博主原创。

最新文章

发表评论