这里写目录标题
选项卡 flex布局和border-bottom底部长度解决
核心部分
1.flex布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2.改变border-bottom 的长度解决方法
.mt-tabpage-title .mt-tabpage-item-cur {
position: relative;
}
.mt-tabpage-title .mt-tabpage-item-cur:after {
color: #666666;
font-size: 16px;
border-bottom: 1px solid #F7AE0A;
content: " ";
position: absolute;
width: 25%;
height: 100%;
transform: translateX(-50%);
left: 50%;
}
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<link type="text/css" href="./tabStyle.css" rel="stylesheet" />
</head>
<body>
<div class="mt-tabpage" js-tab="3">
<div class="mt-tabpage-title" style="margin: auto; display: flex; flex-direction: row;flex-wrap: nowrap;justify-content:space-around;">
<a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">咨询推荐</a>
<a href="javascript:;" class="mt-tabpage-item">我的咨询</a>
</div>
<div class="mt-tabpage-count">
<ul class="mt-tabpage-cont__wrap">
<li class="mt-tabpage-item">Cont1</li>
<li class="mt-tabpage-item">Cont2</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/mt-tabpage.js"></script>
<script type="text/javascript">
$(function () {
$('[js-tab=3]').tab({
curDisplay: 1,
changeMethod: 'horizontal'
});
});
</script>
</body>
</html>
css部分
@charset "utf-8";
*{margin: 0; padding: 0; }
body {
font-family: "Microsoft Yahei";
font-size: 14px;
color: #333;
background-color: #E4E1E1;
}
a, a:hover { text-decoration: none; color: #333; }
ul, li { list-style: none; }
svg{
fill: currentColor;
}
.mt-tabpage {
width: 800px;
margin: 30px auto;
box-shadow: 0 0 5px#A8A8A8;
background-color: #FFFFFF;
}
.mt-tabpage-title {
height: 44px;
font-size: 0;
background-color: #fff;
width: 94%;
margin: auto;
background: #fff;
border-bottom: 1px solid #f1f1f1;
}
.mt-tabpage-title .mt-tabpage-item {
display: inline-block;
width: 105px;
height: 44px;
line-height: 44px;
text-align: center;
color: #666;
font-size: 12px;
}
.mt-tabpage-title .mt-tabpage-item:hover{
color: #666666;
font-size: 16px;
}
.mt-tabpage-title .mt-tabpage-item-cur {
position: relative;
}
.mt-tabpage-title .mt-tabpage-item-cur:after {
color: #666666;
font-size: 16px;
border-bottom: 1px solid #F7AE0A;
content: " ";
position: absolute;
width: 25%;
height: 100%;
transform: translateX(-50%);
left: 50%;
}
.mt-tabpage-count {
position: relative;
width: 800px;
height: 200px;
overflow: hidden;
}
.mt-tabpage-cont__wrap {
position: absolute;
}
.mt-tabpage-count .mt-tabpage-item {
width: 800px;
height: 200px;
text-align: center;
}
js部分
直接复制即可
(function($, window, document, undefined) {
var Plugin = function(elem, options) {
this.$wrapper = elem;
this.$tab_list = this.$wrapper.find('.mt-tabpage-title').find('.mt-tabpage-item');
this.$tabCont_wrap = this.$wrapper.find('.mt-tabpage-cont__wrap');
this.$tab_cont = this.$tabCont_wrap.find('.mt-tabpage-item');
this.timer = null;
this.playTimer = null
this.iNow = 0;
this.defaults = {
curDisplay: 1,
mouse: 'click',
changeMethod: 'default',
autoPlay: false
};
this.opts = $.extend({}, this.defaults, options);
};
Plugin.prototype = {
inital: function() {
var self = this;
this.setData();
this.tabInital();
if(this.opts.mouse === 'click') {
this.$tab_list.click(function() {
self.changeTab($(this).index());
self.iNow = $(this).index();
});
} else if(this.opts.mouse === 'over') {
this.$tab_list.hover(function() {
var cur_obj = this;
clearTimeout(self.timer);
self.timer = setTimeout(function() {
self.changeTab($(cur_obj).index());
}, 30);
self.iNow = $(this).index();
}, function() {
clearTimeout(self.timer);
});
} else {
this.$tab_list.click(function() {
self.changeTab($(this).index());
self.iNow = $(this).index();
});
}
if(this.opts.autoPlay) {
clearInterval(this.playTimer);
this.playTimer = setInterval(function() {
self.autoPlay();
}, 1000);
this.$wrapper.hover(function() {
clearInterval(self.playTimer);
}, function() {
self.playTimer = setInterval(function() {
self.autoPlay();
}, 1000);
});
}
},
setData: function() {
var tabCont_w = this.$tab_cont.width();
var tabCont_h = this.$tab_cont.height();
var tabCont_len = this.$tab_cont.length;
switch(this.opts.changeMethod) {
case 'default':
this.$tab_cont.css({
display: 'none'
});
break;
case 'horizontal':
this.$tabCont_wrap.css({
width: tabCont_w * tabCont_len
});
this.$tab_cont.css({
float: 'left'
});
break;
case 'vertical':
this.$tabCont_wrap.css({
height: tabCont_h * tabCont_len
});
break;
case 'opacity':
this.$tab_cont.css({
display: 'none'
});
break;
default:
this.$tab_cont.css({
display: 'none'
});
break;
}
},
tabInital: function() {
var curNum = this.opts.curDisplay - 1;
this.$tab_list.removeClass('mt-tabpage-item-cur');
this.$tab_list.eq(curNum).addClass('mt-tabpage-item-cur');
if(this.opts.changeMethod === 'default' || this.opts.changeMethod === 'opacity') {
this.$tab_cont.eq(curNum).css({
display: 'block'
});
} else if(this.opts.changeMethod === 'horizontal') {
this.$tabCont_wrap.css({
left: -curNum * this.$tab_cont.width()
});
} else if(this.opts.changeMethod === 'vertical') {
this.$tabCont_wrap.css({
top: -curNum * this.$tab_cont.height()
});
} else {
this.$tab_cont.eq(curNum).css({
display: 'block'
});
}
this.iNow = this.opts.curDisplay - 1;
},
changeTab: function(index) {
this.$tab_list.removeClass('mt-tabpage-item-cur');
this.$tab_list.eq(index).addClass('mt-tabpage-item-cur');
switch(this.opts.changeMethod) {
case 'default':
this.$tab_cont.css({
display: 'none'
});
this.$tab_cont.eq(index).css({
display: 'block'
});
break;
case 'horizontal':
this.$tabCont_wrap.stop().animate({
left: this.$tab_cont.width() * -index
});
break;
case 'vertical':
this.$tabCont_wrap.stop().animate({
top: this.$tab_cont.height() * -index
});
break;
case 'opacity':
this.$tab_cont.stop().fadeOut();
this.$tab_cont.eq(index).stop().fadeIn()
break;
default:
this.$tab_cont.css({
display: 'none'
});
this.$tab_cont.eq(index).css({
display: 'block'
});
break;
}
},
autoPlay: function() {
if(this.iNow === this.$tab_list.length - 1) {
this.iNow = 0;
} else {
this.iNow++;
}
this.changeTab(this.iNow);
},
constructor: Plugin
};
$.fn.tab = function(options) {
var plugin = new Plugin(this, options);
return plugin.inital();
};
})(window.jQuery, window, document);
再来一个选项卡 插入count1部分所在的li
html
<li class="mt-tabpage-item">
<div class="order_details">
<ul>
<li class="fortab prepaids">全部</li>
<li class="fortab prepaids2 checked">今明可约</li>
<li class="fortab prepaids3">价格</li>
<li class="fortab prepaids4">筛选</li>
</ul>
</div>
<div>
<div class="tablelist showdomdiv showsss">
1
</div>
<div class="tablelist hidedomdiv showsss">
2
</div>
<div class="tablelist hidedomdiv showsss" >
3
</div>
<div class="tablelist hidedomdiv showsss" >
4
</div>
</div>
</li>
js
$(document).ready(function(){
// 改为鼠标移上的事件只需把click改为mousemove
$(".fortab").click(function(){
var number=$(".fortab").index(this);
$(this).addClass("checked");
$(this).siblings().removeClass("checked");
$(".tablelist:eq("+number+")").show();
$(".tablelist:eq("+number+")").siblings().hide();
});
});
css
.order_details{margin-top:48px;}
.order_details ul{
width: 90%;
margin: auto; display: flex; flex-direction: row;flex-wrap: nowrap;justify-content:space-around;
}
.order_details .checked{background-color: #fff;color:#F8BF4A;border-bottom:0 ;height: 50px;}
.hidedomdiv{display: none}
.showdomdiv{display: block;}
.showsss{border:1px solid red;text-align: center;line-height: 600px;font-size:40px;}
用了插件很多看的不明白 自己纯手写了一个
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./tabStyle.css">
</head>
<body>
<div class="container">
<div class="mt-tabpage">
<div class="mt-tabpage-item mt-tabpage-item_cur">咨询推荐</div>
<div class="mt-tabpage-item">我的咨询</div>
</div>
<div class="mt">
<div class="order_details">
<ul>
<li class="fortab prepaids">全部</li>
<li class="fortab prepaids2 checked">今明可约</li>
<li class="fortab prepaids3">价格</li>
<li class="fortab prepaids4">筛选</li>
</ul>
</div>
<div>
<div class="tablelist hidedomdiv showsss">
1
</div>
<div class="tablelist showdomdiv showsss">
2
</div>
<div class="tablelist hidedomdiv showsss" >
3
</div>
<div class="tablelist hidedomdiv showsss" >
4
</div>
</div>
</div>
<div class="mt" style="display: none;">aaa</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
// 改为鼠标移上的事件只需把click改为mousemove
$(".fortab").click(function(){
console.log(this);
var number=$(".fortab").index(this);
$(this).addClass("checked");
$(this).siblings().removeClass("checked");
$(".tablelist:eq("+number+")").show();
$(".tablelist:eq("+number+")").siblings().hide();
});
$(".mt-tabpage-item").click(function(){
//console.log($(this).index());
console.log($(this));
var number=$(".mt-tabpage-item").index(this);
$(this).addClass("mt-tabpage-item_cur");
$(this).siblings().removeClass("mt-tabpage-item_cur");
$(".mt:eq("+number+")").show();
$(".mt:eq("+number+")").siblings().hide();
$(".mt-tabpage").show();
});
});
</script>
</html>
css
@charset "utf-8";
*{margin: 0; padding: 0; }
a, a:hover { text-decoration: none; color: #333; }
ul, li { list-style: none; }
.mt-tabpage-count {
position: relative;
width: 800px;
height: 200px;
overflow: hidden;
}
.mt-tabpage-cont__wrap {
position: absolute;
}
.mt-tabpage-count .mt-tabpage-item {
width: 800px;
height: 200px;
text-align: center;
}
.order_details ul{
width: 90%;
margin: auto; display: flex; flex-direction: row;flex-wrap: nowrap;justify-content:space-around;
}
.order_details .checked{background-color: #fff;color:#F8BF4A;border-bottom:0 ;height: 50px;}
.hidedomdiv{display: none}
.showdomdiv{display: block;}
.showsss{border:1px solid red;text-align: center;font-size:40px;}
.mt-tabpage{
display: flex;margin: auto; flex-direction: row;flex-wrap: nowrap;justify-content:space-around;
border-bottom: 1px solid #D6D6D6 ;
width: 90%;
}
.mt-tabpage-item{
position: relative;
}
.mt-tabpage-item_cur:after {
color: #666666;
font-size: 16px;
border-bottom: 2px solid #F7AE0A;
content: " ";
position: absolute;
width: 25%;
height: 100%;
transform: translateX(-50%);
left:50%;
}