下划线效果

    
    






    

        

            
服务产品
            
实物产品
            
医院
            
服务产品
            
实物产品
            
医院
        
        

    

.clearfix{display: flex}
/* tab切换 宽度50%*/
.im_tab {background: #fff;border-bottom: 1px solid #e4e4e4;}
.im_tab:after{ content: ""; display: block; overflow: hidden;width: 100%;/*height: .35rem; */background: #fff; }
.im_tab .box{position: relative;}
.im_tab .boxfixed .active{border-bottom: 3px solid #10adff;}
/*下划线*/
.im_tab .underline{border-bottom: 3px solid #10adff;position: absolute;top:38px;bottom: 0;width: 0;}
.im_tab div.clearfix {line-height: 2.2rem;height: 2.2rem;position: relative;box-sizing: border-box;}
.im_tab div a,.im_tab div p {color:#10adff;height: 2.2rem;font-size:0.7rem;text-align:center;width: 50%;position: relative;box-sizing: border-box;background: #fff;}
.im_tab div a:first-child,.im_tab div p:first-child {}
.im_tab div a.active, .im_tab div p.active {color: #10adff;  background-color: #fff;overflow: hidden;}

.im_tab div a.active span,.im_tab div p.active span{font-size:.8rem;}
.im_tab div p.active a{ color: #10adff;    background: none;}
.im_tab div p a { width:100%;  border:none !important;}
.im_tab3 div p a { width:33.33%;}
.im_tab4 div p a { width:25%;}


.im_tab div em.tip{    position: relative; top: 0; right: -3px; vertical-align: middle; margin-top: -3px; }

$(function() {
            //tab初始状态
        function initTab(){
            var tabW = "";
            var tabOff = "";
            if($("section").hasClass("im_tab")  ){
                if($(".im_tab").hasClass("im_tab3") || $(".im_tab").hasClass("im_tab4")){
                    if($(".im_tab .active>span").length!=0 ){
                        tabW = $(".im_tab .active span").width();
                        var faLeft = $(".im_tab .active").position().left;
                        var sonLeft =$(".im_tab .active span").position().left;
                        tabOff = faLeft + sonLeft; 
                    }else{
                        tabW = $(".im_tab .active").width();
                        tabOff =  $(".im_tab .active").position().left; 
                    }
                }else{
                    var ww = $(".im_tab p:eq(0)").width();
                    tabW =ww-50;
                    
                    if($(".im_tab p:eq(0)").hasClass("active")){
                        tabOff = (ww-tabW)/2
                    }else if($(".im_tab p:eq(1)").hasClass("active")){
                        tabOff = ww+(ww-tabW)/2
                    }                   
                }
                $(".im_tab .underline").css({"left":tabOff,"width":tabW});
            }else if($("nav").hasClass("y_orderlistnav")){
                tabW = $(".y_orderlistnav .tab").width();
                tabOff =  $(".y_orderlistnav .active").position().left;
                $(".y_orderlistnav .underline").css({"left":tabOff,"width":tabW});
            }
        }
            initTab();
        $(".im_tab").delegate('p','click',function() {
            var tabW = "";
            var tabOff="";
            if($(".im_tab").hasClass("im_tab3") || $(".im_tab").hasClass("im_tab4")){
                if($(this).find("span").length!=0){
                //获取字府串宽度
                 tabW = $(this).find("span").width();
                //获取距窗口位移
                    var faLeft = $(this).position().left;
                    var sonLeft =$(this).find("span").position().left;
                    tabOff =  faLeft + sonLeft;
                    //两个切换时,下划线一样长
                    if($(".im_tab p").length == 2){
                        
                        if($(".im_tab p:eq(0) span").width()<$(".im_tab p:eq(1) span").width()){
                            if($(this).index() == 0){
                                tabW = $(".im_tab p:eq(1)").find("span").width();
                                tabOff =  faLeft + sonLeft-19;
                            }
                        }
                    }               
                }else{
                    tabW = $(this).width();
                    tabOff = $(this).position().left;
                }
            }else{
                var ww = $(this).width();
                tabW =ww-50;
                if($(this).index()==0){
                    tabOff = (ww-tabW)/2
                }else if($(this).index()==1){
                    tabOff = ww+(ww-tabW)/2
                }
            }
            //下划线效果
            $(".im_tab .underline").css({"left":tabOff,"width":tabW,"transition": "all linear 0.3s"});
            $(this).addClass("active").siblings().removeClass("active");
            $(".zc_nav").eq($(this).index()).show().siblings(".zc_nav").hide();
            $(".zc_all").eq($(this).index()).show().siblings(".zc_all").hide();
            $(".y_repbox").eq($(this).index()).show().siblings(".y_repbox").hide();
            $(".zc_reportitem").eq($(this).index()).show().siblings('.zc_reportitem').hide();
            //公共切換
            $(".public_tab").eq($(this).index()).show().siblings(".public_tab").hide();
        });

        $(".y_orderlistnav").delegate('.tab','click',function() {
            var tabW = $(this).width();
            //获取距窗口位移
            var tabOff = $(this).position().left;
            //下划线效果
            $(".y_orderlistnav .underline").css({"left":tabOff,"width":tabW,"transition": "all linear 0.3s"});
            $(this).addClass("active").siblings().removeClass("active");
            $(".order_list").eq($(this).index()).show().siblings(".order_list").hide();
            var href = $.attr(this, 'href');
            $root.animate({
                scrollTop: $(href).offset().top
            }, 500, function () {
//              window.location.hash = href;
            });
            return false;   
        });
        //点击输入框，文本框，使提示信息消失
        $("input").click(function() {
            $(this).attr("placeholder","");
        }); 
        $("textarea").click(function() {
            $(this).html("");
            
        });     
})