130 lines
3.1 KiB
HTML
130 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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;
|
|
}
|
|
ul {
|
|
overflow: hidden;
|
|
}
|
|
.tab_title li {
|
|
margin-right: 15px;
|
|
}
|
|
.tab_title li,
|
|
.tab_content li {
|
|
float: left;
|
|
}
|
|
.tab_content .tab_item {
|
|
display: none;
|
|
}
|
|
.title_active {
|
|
color: red !important;
|
|
}
|
|
.content_active {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="tab">
|
|
<ul class="tab_title">
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="tab_content">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
|
|
// json 数据
|
|
var tabs = [
|
|
{
|
|
title: '百货',
|
|
content: [
|
|
{ text: '百货的内容1' },
|
|
{ text: '百货的内容2' },
|
|
]
|
|
},
|
|
{
|
|
title: '宠物',
|
|
content: [
|
|
{ text: '宠物的内容1' },
|
|
{ text: '宠物的内容2' },
|
|
{ text: '宠物的内容3' }
|
|
]
|
|
},
|
|
{
|
|
title: '生活',
|
|
content: [
|
|
{ text: '生活的内容1' },
|
|
{ text: '生活的内容2' },
|
|
{ text: '生活的内容3' }
|
|
]
|
|
},
|
|
];
|
|
|
|
var currentIndex = 0;
|
|
|
|
// 渲染tabs的标题
|
|
function RenderTitle() {
|
|
var ul = document.querySelector(".tab_title");
|
|
tabs.forEach(function(val, index, arr){
|
|
ul.innerHTML += `<li class="${ index == 0 ? 'title_active' : '' }">${val.title}</li>`
|
|
});
|
|
|
|
var li = document.querySelectorAll(".tab_title li");
|
|
li.forEach(function(c,r) {
|
|
c.onclick = function () {
|
|
li.forEach(function(e,v) {
|
|
e.className = ""
|
|
})
|
|
c.className = "title_active"
|
|
currentIndex = r
|
|
innerContent()
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function RenderContent() {
|
|
// 完成第一步tab_item的渲染
|
|
var contentFather = document.querySelector(".tab_content");
|
|
tabs.forEach(function(v,i){
|
|
contentFather.innerHTML += `<div class="tab_item ${ i == 0 ? 'content_active' : ''}"></div>`
|
|
});
|
|
innerContent();
|
|
}
|
|
|
|
function innerContent() {
|
|
var tabItem = document.querySelectorAll(".tab_content .tab_item")
|
|
tabItem.forEach(function(t,b){
|
|
t.className = "tab_item"
|
|
});
|
|
|
|
tabItem[currentIndex].className = "tab_item content_active";
|
|
|
|
if (tabItem[currentIndex].innerHTML.length == 0) {
|
|
tabs[currentIndex].content.forEach(function(v,i){
|
|
tabItem[currentIndex].innerHTML += `<p>${v.text}</p>`
|
|
});
|
|
}
|
|
}
|
|
|
|
RenderTitle()
|
|
RenderContent()
|
|
|
|
</script>
|
|
</html> |