欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 选项卡效果

程序员文章站 2024-03-17 20:38:34
...

用Vue实现选项卡效果。

效果演示

Vue 选项卡效果
点击CSS
Vue 选项卡效果
点击Vue
Vue 选项卡效果
看起来是不是有点菜单导航的感觉,下面跟随我一起来一探究竟?

代码演示

**注意:**引入Vue.js架包


<!DOCTYPE html>

<html>

 

	<head>

		<meta charset="utf-8" />		


		<title>Vue选项卡</title>

		<script type="text/javascript" src="js/vue.js"></script>

	</head>

	<style>

		* {

			padding: 0;

			margin: 0;

		}

		

		.box {

			width: 800px;

			height: 200px;

			margin: 0 auto;

			border: 1px solid #000;

		}

		

		.tabs li {

			float: left;

			margin-right: 8px;

			list-style: none;

		}

		

		.tabs .tab-link {

			display: block;

			width: 250px;

			height: 39px;

			text-align: center;

			line-height: 49px;
			
			font-size: 20px;

			background-color: #5597B4;

			color: #fff;

			text-decoration: none;

		}

		

		.tabs .tab-link.active {

			height: 47px;

			border-bottom: 5px solid blueviolet;

			transition: .3s;

		}

		

		.card {

			float: center;

		}

		

		.card .cards {

			display: none;

		}

		

		.clearfix:after {

			content: "";

			display: block;

			height: 0;

			clear: both;

		}

		

		.clearfix {

			zoom: 1;

		}

	</style>

 

	<body>

		<div id="app" class="box">

			<ul class="tabs clearfix">

				<li v-for="(tab,index) in tabsName">

					<a href="#" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>

				</li>

			</ul>

 

			<div class="card">

				<div class="cards" style="display: block;">我是前端HTML</div>

				<div class="cards">我是前端CSS</div>

				<div class="cards">我是前端Vue</div>

			</div>

		</div>

	</body>

 

	<script>

		var app = new Vue({

			el: "#app",

			data: {

				tabsName: [{

					name: "HTML",

					isActive: true

				}, {

					name: "CSS",

					isActive: false

				}, {

					name: "Vue",

					isActive: false

				}],

				active: false

			},

			methods: {

				tabsSwitch: function(tabIndex) {

 

					var tabCardCollection = document.querySelectorAll(".cards"),

						len = tabCardCollection.length;

 

					for(var i = 0; i < len; i++) {

						tabCardCollection[i].style.display = "none";

						this.tabsName[i].isActive = false;

					}

					this.tabsName[tabIndex].isActive = true;

					tabCardCollection[tabIndex].style.display = "block";

				}

			}

		})

	</script>

 

</html>