jQuery+html+css实现选项卡功能

直接上代码

<div class="page-header float-right">
                <div class="page-title">
                    <ol class="breadcrumb text-right">
                        <li onclick="changeTab(this,'chicang')" class="hide"><a href="#">持仓信息</a></li>
                        <li onclick="changeTab(this,'xianjia')" class="active"><a href="#">限价委托</a></li>
                        <li onclick="changeTab(this,'jihua')" class="hide"><a href="#">计划委托</a></li>
                    </ol>
                </div>
            </div>

/**
         *选项卡切换
         */
        function changeTab(a,type){
            //获取选项卡状态,获取选中选项卡状态,更改选项卡状态,切换选项卡对应div的显示隐藏
            
            var myli = jQuery(a).parent().children();//获取同级的所有元素
            var sort = jQuery(a).index();//获取选中元素排第几个
            //除了选中的其他都变隐藏,先全部变隐藏然后为选中的div更改样式
            jQuery(".card").css('display','none');
            switch (type) {
                case 'chicang':
                    jQuery(".chicang").css('display','flex');
                    break;
                case 'xianjia':
                    jQuery(".xianjia").css('display','flex');
                    break;
                case 'jihua':
                    jQuery(".jihua").css('display','flex');
                    break;
            
                default:
                    break;
            }
            console.log(myli);
            for (let index = 0; index <= myli.length; index++) {
                if(index != sort){//不是被选中的清除active添加hide
                    // console.log(index+'-z-'+sort);

                    jQuery(myli[index]).removeClass("active");
                    jQuery(myli[index]).addClass("hide");
                    //显示对应的div
                }else{//是被选中的添加active清除hide
                    // console.log(index+'-x-'+sort);
                    jQuery(myli[index]).removeClass("hide");
                    jQuery(myli[index]).addClass("active");
                    //显示对应点div
                }
                
                
            }
            // console.log(jQuery(a).index());
            
        }