bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
历届学生/fontendsix/每日课程/2021-11-22/tabs.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 20px;
}
.title_active {
color: red;
}
.tabs_content div {
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<!-- <li :class=" index == currentIndex ? 'title_active' : '' " -->
<li :class="{ title_active: index == currentIndex }"
@click="currentIndex = index"
v-for="(item,index) in tabsList" :key="index">
{{ item.title }}
</li>
</ul>
<div class="tabs_content">
<div :class="index == currentIndex ? 'content_active' : '' " v-for="(item,index) in tabsList" :key="index">
<p v-for="(v,i) in item.content" :key="i">
{{ v.text }}
</p>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabsList: [
{
id: 1,
title: '精选',
content: [
{ text: '精选的内容1' },
{ text: '精选的内容2' },
{ text: '精选的内容3' },
]
},
{
id: 2,
title: '美食',
content: [
{ text: '美食的内容1' },
{ text: '美食的内容2' },
{ text: '美食的内容3' },
]
},
{
id: 3,
title: '百货',
content: [
{ text: '百货的内容1' },
{ text: '百货的内容2' },
{ text: '百货的内容3' },
]
},
{
id: 4,
title: '个护',
content: [
{ text: '个护的内容1' },
{ text: '个护的内容2' },
{ text: '个护的内容3' },
]
},
]
},
methods: {
changeActive(index) {
this.currentIndex = index;
}
}
})
</script>
</html>