我目前正在做一个小项目,它需要我创建用本地.json文件中的数据动态填充的选项卡.我已经让选项卡标题正常工作了,但是每次单击选项卡时,它只显示第一个数据索引中的内容.我已经try 了遍历数据和其他一些我在这一点上已经忘记的事情,但没有运气,所以如果有任何帮助,我将不胜感激.
需要注意的一点是,这是我第一次使用Vue.我知道用Vue本身做这件事可能有一种更简单的方法,但在这个阶段我更愿意使用香草JS,因为我更熟悉它.我也没有使用标签ID,因为它是动态的.
这是我目前拥有的代码,如果有什么需要我补充的,请告诉我.
Html:
<template>
<section class="tab__container">
<div class="tab__sidebar">
<button class="tab__button" v-for="data in data" :key="data.title">{{ data.title }}</button>
</div>
<div class="tab__content" v-for="data in data" :key="data.content">
<p v-html="data.content"></p>
</div>
</section>
Css:以下内容:
<script>
import data from '../assets/data.json'
export default {
props: ['title', 'content'],
data() {
return {
data: data
}
}
}
</script>
<style>
.tab__container {
display: none;
}
@media (min-width: 769px) {
.tab__container {
display: flex;
border: 1px solid #d2d2d2;
}
.tab__sidebar {
flex-direction: row;
width: 125px;
flex-shrink: 0;
background: #cccccc;
}
.tab__button {
display: block;
padding: 10px;
background: #eeeeee;
border: none;
width: 100%;
outline: none;
cursor: pointer;
}
.tab__button:active {
background: #dddddd;
}
.tab__button:not(:last-of-type) {
border-bottom: 1px solid #cccccc;
}
.tab__button.is__active {
font-weight: bold;
border-right: 2px solid #009879;
background: #dddddd;
}
.tab__content {
padding: 20px;
font-size: 18px;
display: none;
}
.tab__content.is__active {
display: block;
}
}
</style>
JavaScript:如下所示:
document.querySelectorAll(".tab__button").forEach(button => {
button.addEventListener("click", () => {
var sidebar = button.parentElement;
var tabContainer = sidebar.parentElement;
var tabToActivate = tabContainer.querySelector(".tab__content");
sidebar.querySelectorAll(".tab__button").forEach(button => {
button.classList.remove("is__active");
});
tabContainer.querySelectorAll(".tab__content").forEach(tab => {
tab.classList.remove("is__active");
});
button.classList.add("is__active");
tabToActivate.classList.add("is__active");
});
});
.json数据:
[
{
"title": "Section 1",
"content": "<p>Maecenas nec semper ante, pellentesque posuere lorem. Nullam ipsum massa, consequat eget urna ut, pulvinar dignissim lorem. Nulla facilisi. Nam mattis eleifend metus. Fusce at commodo lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pellentesque elit sem, vel blandit posuere.</p>"
},
{
"title": "Section 2",
"content": "<p>Mauris a orci sodales, scelerisque velit vitae, gravida nisl. Ut non laoreet eros, vel laoreet nisi. Praesent sed dolor dui. Proin non fringilla quam. Aliquam erat volutpat. Vestibulum vel arcu semper, lobortis turpis ac, ultricies nisi. Praesent id.</p>"
},
{
"title": "Section 3",
"content": "<p>Sed elementum sapien ut sapien imperdiet, eu venenatis enim rhoncus. Praesent euismod tincidunt rhoncus. Duis cras amet:</p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul>"
},
{
"title": "Section 4",
"content": "<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"
}
]