给我写一个使用纯html和elementUI写的横排tabs标签页的代码
时间: 2024-03-21 19:39:58 浏览: 62
html css js 实现Tab标签页示例代码
好的,以下是一个使用纯HTML和ElementUI编写的横排Tabs标签页的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>横排Tabs标签页</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!-- Tabs标签页组件 -->
<el-tabs v-model="activeTab" type="border-card">
<!-- Tab标签页项 -->
<el-tab-pane label="选项1" name="tab1">
<p>这是选项1的内容。</p>
</el-tab-pane>
<el-tab-pane label="选项2" name="tab2">
<p>这是选项2的内容。</p>
</el-tab-pane>
<el-tab-pane label="选项3" name="tab3">
<p>这是选项3的内容。</p>
</el-tab-pane>
</el-tabs>
</div>
<!-- 引入Vue.js和ElementUI库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// 创建Vue实例
new Vue({
el: '#app',
data: {
activeTab: 'tab1' // 默认选中的Tab标签页项
}
})
</script>
</body>
</html>
```
注:以上代码需要同时引入Vue.js和ElementUI库才能正常运行。
阅读全文