Vue.js - работа с табами

1

При клике на кнопку задается значение переменной activeTab, в зависимости от неё добавляется класс active и отображаться соответствующий див с контентом с помощью директивы v-show.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<div class="tabs">
		<div class="tabs-header">
			<button class="tabs-btn" @click="activeTab = 1" :class="{ active: activeTab === 1 }">Вкладка 1</button>
			<button class="tabs-btn" @click="activeTab = 2" :class="{ active: activeTab === 2 }">Вкладка 2</button>
			<button class="tabs-btn" @click="activeTab = 3" :class="{ active: activeTab === 3 }">Вкладка 3</button>
		</div>
		<div class="tabs-body">
			<div class="tabs-body-item" v-show="activeTab === 1">
				Содержимое вкладки 1
			</div>
			<div class="tabs-body-item" v-show="activeTab === 2">
				Содержимое вкладки 2
			</div>
			<div class="tabs-body-item" v-show="activeTab === 3">
				Содержимое вкладки 3
			</div>
		</div>
	</div>
</div>

<script>
new Vue({
	el: '#app',
	data: {
		activeTab: 1
	}
});
</script>
HTML

CSS:

.tabs-header {
	border-bottom: 3px solid #eee;
}
.tabs-btn {
	font-size: 18px;
	border: none;
	display: inline-block;
	background: #fff;
	padding: 10px 25px;
	text-align: center;
	cursor: pointer;
	margin-bottom: -3px;
	border-bottom: 3px solid #eee;
}
.tabs-btn.active {
	color: #5fa03a;
	border-bottom: 3px solid #5fa03a;
}
.tabs-body-item {
	padding: 20px 0;
}
CSS

Результат:

2

В данном примере используется директива v-for для вывода в цикле кнопок и вкладок из массива tabs:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<div class="tabs">
		<div class="tabs-header">
			<button class="tabs-btn" v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="{ 'active': activeTab === tab.id }">{{ tab.title }}</button>
		</div>
		<div class="tabs-body">
			<div class="tabs-body-item" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
				<div v-html="tab.content"></div>
			</div>
		</div>	
	</div>	
</div>

<script>
new Vue({
	el: '#app',
	data: {
		activeTab: 1,
		tabs: [
			{id: 1, title: 'Вкладка 1', content: '<h2>Содержимое вкладки 1</h2>'},
			{id: 2, title: 'Вкладка 2', content: '<h2>Содержимое вкладки 2</h2>'},
			{id: 3, title: 'Вкладка 3', content: '<h2>Содержимое вкладки 3</h2>'}
		]
	}
});
</script>
HTML

CSS:

.tabs-header {
	border-bottom: 3px solid #eee;
}
.tabs-btn {
	font-size: 18px;
	border: none;
	display: inline-block;
	background: #fff;
	padding: 10px 25px;
	text-align: center;
	cursor: pointer;
	margin-bottom: -3px;
	border-bottom: 3px solid #eee;
}
.tabs-btn.active {
	color: #5fa03a;
	border-bottom: 3px solid #5fa03a;
}
.tabs-body-item {
	padding: 20px 0;
}
CSS

Результат:

04.03.2024
342

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43534
+34
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
24130
+3
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
62638
+26
Vue.js - Ограничение ввода в текстовые поля
Чтобы ограничить ввод значений в текстовое поле с помощью Vue.js, можно воспользоваться директивой v-model для связи...
352
0
Шаблонизатор Smarty
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
26789
+5
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
12422
+2