How to achieve non-component tab switching effect

This article only describes a few cases that do not use component tab switching but have the same function

Table of contents

1. What is the component tab?

2. Non-component tab switching --- use steps

1. HTML part

2.JS part

3. CSS part

Summarize

---

1. What is the component tab ?

       Tabs This component is a tabs component . When there are many tabs, it can be configured to slide left and right. When there are few tabs, sliding can be disabled. A feature of this component is that when configured in scroll mode, the active tab will automatically move to the middle of the component. (It is known to be simpler and more convenient)

(Specific reference link: Tabs label | uView 2.0 )

2. Non-component tab switching --- use steps

1. HTML part

The code is as follows (example):

<div class="center_botts flex_column">
			<p class="center_box">机构列表</p>
			<div class="center_botts_bottom">
				<div class="boxs_left flex_column">
					<div :class="current==index?'active':'org'" v-for="(item,index) in datas" :key="index"
						@click="tabClick(item,index)">{
   
   {item.branch}}</div>
				</div>
				<div class="boxs">
					<div class="boxs1" v-for="(item,index) in leaderList" :key="index" v-show="current==index">
						<img :src="hrefURL+item.images" alt="" class="boxs_img">
						<a href="./html/organization.html" class="center_bott_right">{
   
   {item.name}}</a>
					</div>
				</div>
			</div>
		</div>

2.JS part

The code is as follows (example):

<script type="text/javascript">
	var vm = new Vue({
		el: '#content',
		data: {
			hrefURL: hrefURL,
		    datas: [], //机构列表内容
			leaderList: [], //机构内容
			current: 0
		},
		mounted() {
			this.initData()
		},
		methods: {
		    //首页内容
			initData() {
				let sendData = {};
				$.ajax({
					type: "post",
					url: hrefURL + '/api/index/index',
					data: sendData,
					success: (res) => {
						if (res.code == 1) {
							// console.log(res);
							 this.datas = res.data.branch
							 if (res.data.branch.length > 0) {
							 	this.tabClick(res.data.branch[0], 0)
							 }
						} else {
							layer.msg(res.msg);
						}
					},
					error(err) {
						layer.msg('网路出现故障；请稍后再试');
					}
				});
			},
			tabClick(item, index) {
			 	let sendData = {};
			 	$.ajax({
			 		type: "post",
			 		url: hrefURL + '/api/index/branch',
			 		data: sendData,
			 		success: (res) => {
			 			if (res.code == 1) {
			 				// console.log(res);
			 				this.leaderList = res.data
			 				this.current = index
			 				// console.log(this.current);
			 			} else {
			 				layer.msg(res.msg);
			 			}
			 		},
			 		error(err) {
			 			layer.msg('网路出现故障；请稍后再试');
			 		}
			 	});
			 },
		},


	})



</script>

3. CSS part

#content .center_botts {
	width: 90%;
	margin: 30px auto 0;
	font-size: 26px;
	color: #000;
	font-weight: bold;
}

#content .center_botts .center_box {
	/* color: #164A92; */
	/* 	background-image: -webkit-linear-gradient(bottom, #164A92, #1a92ca);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent; */
	width: 7%;
	color: #fff;
	background: linear-gradient(#164A92, #1a92ca);
	padding: 10px;
	text-align: center;
}

.boxs1 .center_bott_right {
	color: #000;
	margin-left: 30px;
	font-weight: normal;
	font-size: 22px;
	height: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 10;
	/*10表示只显示10行*/
	-webkit-box-orient: vertical;
	line-height: 30px;
}

.center_botts_bottom {
	margin-top: 10px;
	display: flex;
}

.boxs {
	width: 90%;
}

.boxs1 {
	display: flex;
}

.boxs_left {
	width: 160px;
	height: 300px;
	margin-top: 10px;
	overflow: auto;
}

.org {
	font-size: 18px;
	color: #c5c5c5;
	margin-bottom: 15px;
	cursor: pointer;
	font-weight: normal;
}

.active {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	cursor: pointer;
	color: #000;
}

.boxs_img {
	width: 450px;
	height: 300px;
	margin-left: 30px;
	float: left;
}

---

Summarize

       The above is what I want to talk about today. This article only briefly introduces how to apply it when non-component tab switching is required. Of course, it is simpler and more convenient to apply components in most cases.