当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery多种element-ui标签选项卡插件

jQuery多种element-ui标签选项卡插件

分类: js特效 / jQuery特效	发布时间: 2018-01-16	访问量: 3956
下载量: 44

点击下载预览效果

更多>

最新下载

三款jQuery表单验证申请代码

三款jQuery表单验证申请代码是一款登录表单，企业信息填写表单，手机注册表单验证大集结代码。

0 2025-12-29

jQuery右侧悬浮固定qq在线客服特效代码下载

0 2025-12-29

CSS3实现3D折叠字体效果代码

CSS3实现3D折叠字体效果代码是一款纯CSS3实现的3D折纸效果。

0 2025-12-29

jQuery标签页选项卡插件

基于jQuery制作简单的选项卡标签页tab切换，这是一款视觉效果较好常用的选项卡切换插件。支持点击和悬停切换，默认可设置自动切换，包含4种切换方式：默认无，滑动，上下滚动，淡出淡现等。

0 2025-12-29

css3实现动画按钮

css3实现动画按钮是一款基于css3实现的动态按钮特效。

0 2025-12-29

css菜单栏特效，网页导航栏设计html

这是一款带悬停动画的css菜单栏特效，网页导航栏设计html，精美的全屏背景+六边形菜单悬停效果，十分契合且漂亮，希望大家喜欢。

0 2025-12-29

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

14670 2025-08-28
CSS3 教程

1542092 2025-08-27
Rust 教程

22281 2025-08-27
Vue 教程

24752 2025-08-22
PostgreSQL 教程

21434 2025-08-21
Git 教程

8506 2025-08-21

jQuery多种element-ui标签选项卡插件

js代码

<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/element.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: '#myVue',
		data() {
			return {
				activeName: 'second',
				activeName2: 'first',
				tabPosition: 'top',
				editableTabsValue2: '2',
				editableTabs2: [{
					title: 'Tab 1',
					name: '1',
					content: 'Tab 1 content'
				}, {
					title: 'Tab 2',
					name: '2',
					content: 'Tab 2 content'
				}],
				tabIndex: 2
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			addTab(targetName) {
				let newTabName = ++this.tabIndex + '';
				this.editableTabs2.push({
					title: 'New Tab',
					name: newTabName,
					content: 'New Tab content'
				});
				this.editableTabsValue2 = newTabName;
			},
			removeTab(targetName) {
				let tabs = this.editableTabs2;
				let activeName = this.editableTabsValue2;
				if(activeName === targetName) {
					tabs.forEach((tab, index) => {
						if(tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if(nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}

				this.editableTabsValue2 = activeName;
				this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
			}
		}
	})
</script>