63 lines
1.5 KiB
HTML
63 lines
1.5 KiB
HTML
<!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>Document</title>
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2223989_98p80aj9eus.css">
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<link rel="stylesheet" href="./css/tabs.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<ul class="tabs_title">
|
|
<li class="active">首页</li>
|
|
<li>科技</li>
|
|
<li>社会</li>
|
|
<li>军事</li>
|
|
</ul>
|
|
|
|
<ul class="tabs_content">
|
|
<li class="active">首页的内容</li>
|
|
<li>科技的内容</li>
|
|
<li>社会的内容</li>
|
|
<li>军事的内容</li>
|
|
</ul>
|
|
|
|
</body>
|
|
<script>
|
|
|
|
var tabsTitle = _(".tabs_title li"),
|
|
tabsContent = _(".tabs_content li");
|
|
|
|
|
|
console.log(tabsTitle, tabsContent);
|
|
|
|
|
|
tabsTitle.forEach((v,i) => {
|
|
// 为所有标题li标签绑定事件
|
|
v.onclick = () => {
|
|
// 清除 所有 li 标签的样式
|
|
tabsTitle.forEach((item,index) => {
|
|
item.className = ""
|
|
tabsContent[index].className = ""
|
|
})
|
|
|
|
// 为你点击的li标签添加激活样式
|
|
v.classList.add("active")
|
|
// 为内容的li标签添加样式
|
|
tabsContent[i].classList.add("active")
|
|
}
|
|
})
|
|
|
|
|
|
// 获取多个标签
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |