html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡切换</title>
<link rel="stylesheet" type="texts" href=".s/index.css" />
</head>
<body>
<div id="main">
<div class="tabs">
<div class="red active">选项一</div>
<div class="green">选项二</div>
<div class="blue">选项三</div>
<div class="yellow">选项四</div>
</div>
<div id="content">
<div id="one" class="active">
<p>
爱情要完结的时候自会完结,到时候,你不想画上句号也不行。爱情,原来是含笑饮毒酒。
</p>
<img src="./imgs/1.jpeg" />
</div>
<div id="two">
<p>
在这个光怪陆离的人间,没有谁可以将日子过的行云流水。但我始终相信,走过平湖山雨,岁月山河,那些历尽劫数,尝遍百味的人,会更加生动而干净。
</p>
<img src="./imgs/2.jpeg" />
</div>
<div id="three">
<p>
对于三十岁以后的人来说,十年八年不过是指缝间的事,而对于年轻人而言,三年五年就可以是一生一世。
</p>
<img src="./imgs/3.jpeg" />
</div>
<div id="four">
<p>
我要你知道,在这个世界上总有一个人是等着你的,不管在什么时候,不管在什么地方,反正你知道,总有这么个人。
</p>
<img src="./imgs/4.jpeg" />
</div>
</div>
</div>
</body>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
<ml>
补充js代码
// 实现选项卡功能
function init() {
// TODO 待补充代码
//获取选项卡元素
var tabs=document.querySelector('.tabs');
var lis=tabs.querySelectorAll('div');
//获取内容元素
var content=document.querySelector('#content');
var items=content.querySelectorAll('div')
//for循环绑定点击事件
for(var i=0; i<lis.length; i++){
//给选项卡设置索引号
lis[i].setAttribute("index",i);
lis[i].onclick = function(){
//干掉所有人,只给当前所点击的加上类名
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
this.className='active';
//下面内容显示模块
var index=this.getAttribute('index');
console.log(index);
for(var i=0;i<items.length;i++){
//干掉所有人,让其余的item隐藏,只显示对应的item
items[i].style.display='none';
items[index].style.display='block';
}
}
}
}
init();
更简便的方法
// 实现选项卡功能
function init() {
// TODO 待补充代码
var divs = document.querySelectorAll('.tabs>div');
var imgs = document.querySelectorAll('#content>div');
for(let i = 0;i<divs.length;i++)
{
divs[i].onclick=function(){
for(let a = 0;a<divs.length;a++)
{
//让所有的都去除active类
divs[a].classList.remove('active');
imgs[a].classList.remove('active');
}
//只有当前点击的留下active类
divs[i].classList.add('active');
imgs[i].classList.add('active');
}
}
}
init();
className与classList
考察点:原生js的操作