128 lines
2.9 KiB
HTML
128 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<script src="./Tabs.js"></script>
|
|
<script >
|
|
var tab = new Tabs({
|
|
name: 'zhangsan'
|
|
});
|
|
tab.getUserName();
|
|
</script>
|
|
<title>tabs切换</title>
|
|
<style>
|
|
body,ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
.main {
|
|
width: 385px;
|
|
height: 300px;
|
|
margin: 10px auto;
|
|
}
|
|
.tabs_title {
|
|
overflow: hidden;
|
|
}
|
|
.tabs_title ul li {
|
|
float: left;
|
|
margin-right: 62px;
|
|
}
|
|
.active_title {
|
|
color: red;
|
|
}
|
|
|
|
.tabs_content ul li {
|
|
display: none
|
|
}
|
|
.active_content {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="main">
|
|
<div class="tabs_title">
|
|
<ul id="tabs_father">
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tabs_content">
|
|
<ul id="content_father">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var TabTitleList = [ '热点新闻', '社会舆论', '全民聚焦', '娱乐视频' ],
|
|
TabContentList = ['热点新闻的内容', '社会舆论的内容', '全民聚焦的内容', '娱乐视频的内容'],
|
|
TabTitleHtml = ""
|
|
TabContentHtml = "",
|
|
TabFather = document.getElementById("tabs_father"),
|
|
TabContentFather = document.getElementById("content_father");
|
|
|
|
// 渲染标题
|
|
function WirteTabTitle() {
|
|
for (let i = 0; i < TabTitleList.length; i++) {
|
|
TabTitleHtml += `<li class="${ i == 0 ? 'active_title' : '' }">
|
|
${TabTitleList[i]}
|
|
</li>`
|
|
}
|
|
TabFather.innerHTML = TabTitleHtml
|
|
}
|
|
|
|
// 渲染内容
|
|
function WirteTabContent () {
|
|
for (let i = 0; i < TabContentList.length; i++) {
|
|
TabContentHtml += `<li class="${ i == 0 ? 'active_content' : '' }">
|
|
<p>${TabContentList[i]}</p>
|
|
</li>`
|
|
}
|
|
TabContentFather.innerHTML = TabContentHtml
|
|
}
|
|
|
|
// 为标题绑定悬浮事件
|
|
function BindClick () {
|
|
var TabTitleL = document.getElementsByClassName("tabs_title")[0].getElementsByTagName("li");
|
|
var TabContent = document.getElementsByClassName("tabs_content")[0].getElementsByTagName("li");
|
|
for (let i = 0; i < TabTitleL.length; i++) {
|
|
TabTitleL[i].onmouseover = function () {
|
|
for (let j = 0; j < TabTitleL.length; j++) {
|
|
TabTitleL[j].className = ""
|
|
TabContent[j].className = ""
|
|
}
|
|
TabTitleL[i].className = "active_title"
|
|
TabContent[i].className = "active_content"
|
|
}
|
|
// (function (j) {
|
|
// TabTitleL[j].onmouseover = function () {
|
|
// console.log(j)
|
|
// }
|
|
// })(i)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
WirteTabTitle()
|
|
WirteTabContent()
|
|
BindClick();
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |