一、tab栏切换
1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。
2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来
-
提示
1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可
2.让div显示出来，只需要将div的class增加current即可
3.如何利用自定义属性降按钮与下方盒子建立联系
<!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">
<title>Document</title>
<style>
.tab_con {
width: 500px;
height: 350px;
margin: 50px auto 0;
}
.tab_btns {
height: 50px;
}
.tab_btns input {
width: 100px;
height: 50px;
background: #ddd;
border: 0px;
outline: none;
}
.tab_btns .active {
background: gold;
}
.tab_cons {
height: 300px;
background: gold;
}
.tab_cons div {
height: 300px;
line-height: 300px;
text-align: center;
display: none;
font-size: 30px;
}
.tab_cons .current {
display: block;
}
</style>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
<script>
// 获取元素
var tab_btns = document.querySelector('.tab_btns');
var tab_cons = document.querySelector('.tab_cons');
var btns = tab_btns.querySelectorAll('input');
var divs = tab_cons.querySelectorAll('div');
for (var i = 0; i < btns.length; i++) {
// 设置索引号
btns[i].setAttribute('index', i);
btns[i].addEventListener('click', function (e) {
// 干掉所有
for (var i = 0; i < btns.length; i++) {
btns[i].className = '';
divs[i].className = '';
}
// 点击谁，显示谁，显示自己 当前的小li 设置current 类名
e.target.className = 'active';
// 获得索引号
var index = this.getAttribute('index');
divs[index].className = 'current';
});
}
</script>
</html>
二、5s跳转
1、5s之后自动跳转到https://www.baidu.com/
2、页面中的时间要动态变化
-
提示
1.用到setInterval，要用到clearInterval
2.使用到innerHTML或者innerText的赋值对标签的内容进行修改
3.用到location.href的赋值进行界面的跳转
<!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">
<title>Document</title>
<style>
.bt {
position: relative;
top: -24px;
left: 313px;
background-color: aqua;
font-family:cursive;text-shadow:6px 2px 2px #333;color:rgb(90, 20, 255);
}
</style>
</head>
<body>
<span style="font-family:cursive;text-shadow:6px 2px 2px #333;color:rgb(255, 20, 20);">抱歉，你访问的网页不存在或者已经被删除。 </span>
<div>该界面将在5s自动跳转到首页，或者您点击</div> <button class="bt">立即跳转</button>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
location.href = 'http://www.itcast.cn'
}
var timer = 5;
setInterval(function () {
if (timer == 0) {
location.href = 'https://www.baidu.com/'
} else {
div.innerHTML = '该界面将在' + timer + "s自动跳转到首页，或者您点击"
timer--
}
}, 1000)
</script>
</body>
</html>
