选项卡_flex布局改变border-bottom 的长度解决方法

news/2024/7/10 23:41:35 标签: html5, jquery, javascript, css

这里写目录标题

  • 选项卡 flex布局和border-bottom底部长度解决
    • 核心部分
    • html部分
    • css部分
    • js部分
  • 再来一个选项卡 插入count1部分所在的li
  • 用了插件很多看的不明白 自己纯手写了一个

选项卡 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_74">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_374">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_492">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%;
}

http://www.niftyadmin.cn/n/883329.html

相关文章

常见算法分析

常见算法分析

常见算法分析 整理笔记&#xff0c;也不只能合适会全部更新完成。 气泡排序 1. 定义 冒泡排序是一种算法&#xff0c;用于比较相邻元素&#xff0c;并在相邻元素未按预期顺序进行交换时交换它们的位置。顺序可以是升序或降序。 这个算法的名字由来是因为越小的元素会经由交…
阅读更多...
jq笔记

jq笔记

这里写目录标题一级目录二级目录jq选择器$ 本质jq和js dom 相互转换jq显示隐藏自用小插件悬浮可拖拽导航点击查看详情一级目录 二级目录 jq选择器 id选择器 $(#box) 类选择器 $(.box) 标签选择器 $(p) 并集选择器 $(li,a,#box) 交集选择器 $(div.abc)//子代选择器 $(‘ul>…
阅读更多...
QT 生成 pdf QPdfWriter

QT 生成 pdf QPdfWriter

不管用qt做什么&#xff0c;最后总逃不开做报告和图表。在这里整理下使用qt生成pdf报告。 QT 生成 pdf&#xff08;QPdfWriter&#xff09;1.qt生成pdf1.1 选择生成目录1.2 构造QPdfWriter1.3 写入内容1.3.1 画背景图&#xff0c;0,0作为起点1.3.2 贴生成图&#xff0c;比如图表…
阅读更多...
QT 网络相关整理 是否通外网、本机公网IP地址、获取本机IP、Url转IP、IP地址及端口是否在线、获取网页源码、是否为ip、mac、电话、邮箱

QT 网络相关整理 是否通外网、本机公网IP地址、获取本机IP、Url转IP、IP地址及端口是否在线、获取网页源码、是否为ip、mac、电话、邮箱

1. 是否通外网 bool IsOnline() {QTcpSocket tcpClient;tcpClient.abort();tcpClient.connectToHost("115.239.211.112", 80);return tcpClient.waitForConnected(3000); }2.本机公网IP地址 QString GetNetIP(const QString &webCode) {QString web webCode;w…
阅读更多...
Study-VTK：计算图形中心线（利用vmtk）

Study-VTK：计算图形中心线（利用vmtk）

原理 http://lantiga.github.com/media/AntigaPhDThesis.pdf 把模型封闭&#xff0c;选取输入输出点&#xff0c;依次求内切球&#xff0c;圆心为中心线。 /*!* \brief 计算中心线*/ vtkSmartPointer<vtkPolyData> MatUtil::ComputingCenterLines(vtkSmartPointer<vtk…
阅读更多...
面试总结-数据结构与算法

面试总结-数据结构与算法

面试总结-数据结构与算法 1 解决哈希冲突的办法 链地址 相当于重复的键单独搞个链表公共溢出区&#xff0c;把重复的键集中存储多搞几个哈希函数&#xff0c;第一个重复了用第二个开放定址&#xff0c;冲突后用冲突的键再产生一个新的地址 QHash 默认情况下根据不同的键产生…
阅读更多...
qt qtextedit 限制富文本复制 限制字符

qt qtextedit 限制富文本复制 限制字符

qtextedit 支持很多&#xff0c;比如富文本等。但有时候只要想普通字符&#xff0c;并且限制字符数量。 ui->description_edit->setFixedHeight(80);ui->description_edit->setAcceptRichText(false);connect(ui->description_edit, &QTextEdit::textChange…
阅读更多...
v-for遍历router-link 实现导航跳转

v-for遍历router-link 实现导航跳转

<template><div class"box"> 联系我们<div class"dot_nav"><div class"dot" v-for"(operate,path,index) in navTo.operate" click"change(index)" :class"{ bgColors:indexcurrent}">&…
阅读更多...
最新文章

Copyright @ 2022~2023