JQ选项卡Tab非同级切换并同步下划线滑动效果

上次我写了 简单的JS实现选项卡Tab非同级切换-雪哥尔 (xulgr.com) 的这篇博文，用起来感觉还不够丝滑，这次添加了下划线（也就是border-bottom）样式，达到切换任意相邻或不相邻的TAB时都能实现的滑动效果，并做的更简单一点。

首先是HTML

<div class="XulgrTab_box">
	<div class="XulgrTab_btn">选项一</div>
	<div class="XulgrTab_btn">选项二</div>
	<div class="XulgrTab_btn">选项三</div>
	<div class="XulgrTab_btn">选项四</div>
	<div class="XulgrTab_border"></div>
</div>
<div class="XulgrTab_content">
	<div class="XulgrTab_contents XulgrTab_content_click">
		选项一内容...
	</div>
	<div class="XulgrTab_contents">
		选项二内容...
	</div>
	<div class="XulgrTab_contents">
		选项三内容...
	</div>
	<div class="XulgrTab_contents">
		选项四内容...
	</div>
</div>

先设计一下样式

.XulgrTab_box {
	display: flex;
	position: relative;
 }
.XulgrTab_box .XulgrTab_btn{
	width: 50px;
	height: 30px;
	line-height: 30px;
	padding: 5px 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
}
.XulgrTab_box .XulgrTab_border{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	padding: 0 10px;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: all .3s;
}
.XulgrTab_box .XulgrTab_border:before{
	content: '';
	width: inherit;
	border-bottom: 3px solid #1e90ff;
}
.XulgrTab_content{
	margin-top: 10px;
}
.XulgrTab_content .XulgrTab_contents{
	display: none;
}
.XulgrTab_content .XulgrTab_contents.XulgrTab_content_click{
	display: block;
}

最后是jQuery

$('.XulgrTab_btn').click(function(){
	contents = $('.XulgrTab_contents');
	index = $(this).index();
	contents.eq(index).addClass('XulgrTab_content_click');
	contents.eq(index).siblings().removeClass('XulgrTab_content_click');
	$(this).parent().find('.XulgrTab_border').css('transform','translate('+index+'00%)');
});

演示效果

运行DEMO

 

修复版本一

然后又发现一个问题，上面的方法TAB选项的文字都是规定了width长度的，只能字数相同时适用，若选项的文字或字符串不一致时无法使下划线自由变换对应长度和位置会对不齐，所以我舍弃了transform控制下划线位置，直接用JQ获取文本长度（$(document).width()）和距左距离（$(document).offset().left）来控制下划线的每次点击时变化长度和位置。

HTML在第一个选项加多一个类，用来控制首次加载时默认选择选项一的下划线长度和位置

<div class="XulgrTab_box">
	<div class="XulgrTab_btn XulgrTab_btn1">选项一</div>
	<div class="XulgrTab_btn">选项二加长加长</div>
	<div class="XulgrTab_btn">选项三加长加长加长加长加加长</div>
	<div class="XulgrTab_btn">选项四</div>
	<div class="XulgrTab_border"></div>
</div>
<div class="XulgrTab_content">
	<div class="XulgrTab_contents XulgrTab_content_click">
		选项一内容...
	</div>
	<div class="XulgrTab_contents">
		选项二内容...
	</div>
	<div class="XulgrTab_contents">
		选项三内容...
	</div>
	<div class="XulgrTab_contents">
		选项四内容...
	</div>
</div>

CSS去除掉width和padding

.XulgrTab_box {
	display: flex;
	position: relative;
 }
.XulgrTab_box .XulgrTab_btn{
	height: 30px;
	line-height: 30px;
	padding: 5px 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
}
.XulgrTab_box .XulgrTab_border{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 3px solid #1e90ff;
	transition: all .3s;
}
.XulgrTab_content{
	margin-top: 10px;
}
.XulgrTab_content .XulgrTab_contents{
	display: none;
}
.XulgrTab_content .XulgrTab_contents.XulgrTab_content_click{
	display: block;
}

JQ直接用offset()和width()方法控制宽度和位置，但需要在此之前写首次加载默认的选项一

$('.XulgrTab_btn.XulgrTab_btn1').each(function(){
	var $this = $(this),
		$left = $this.offset().left,
		$width = $this.width();
	$this.parent().find('.XulgrTab_border').css({
		'left': ($left+10)+'px',//$left+10是跟.XulgrTab_btn的padding同步的，按需修改
		'width': $width+'px'
	});
});
$('.XulgrTab_btn').click(function(){
	var $this = $(this),
		$left = $this.offset().left,
		$width = $this.width(),
		contents = $('.XulgrTab_contents'),
		index = $(this).index();
	contents.eq(index).addClass('XulgrTab_content_click');
	contents.eq(index).siblings().removeClass('XulgrTab_content_click');
	$this.parent().find('.XulgrTab_border').css({
		'left': ($left+10)+'px',//$left+10是跟.XulgrTab_btn的padding同步的，按需修改
		'width': $width+'px'
	});
});

最后来看效果

运行DEMO