下划线效果
2018-06-08 本文已影响0人
呼兰呦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="global.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/init.js"></script>
<body>
<section class="im_tab im_tab3">
<div class="box">
<div class="clearfix">
<p class="fl active" id=""><span>服务产品</span></p>
<p class="fl" id=""><span>实物产品</span></p>
<p class="fl" id=""><span>医院</span></p>
<p class="fl" id=""><span>服务产品</span></p>
<p class="fl" id=""><span>实物产品</span></p>
<p class="fl" id=""><span>医院</span></p>
</div>
<div class="underline"></div>
</div>
</section>
</body>
</html>
.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("");
});
})
