排它思想
选中一个排除其他的
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .active{ 8 background-color: blue; 9 } 10 #aaa{ 11 50px; 12 height: 70px; 13 background-color: red; 14 position: absolute; 15 top: 30px; 16 display: none; 17 18 } 19 20 #box{ 21 50px; 22 height: 30px; 23 background-color: blue; 24 position: relative; 25 } 26 </style> 27 </head> 28 <body> 29 <button>按钮1</button> 30 <button>按钮2</button> 31 <button>按钮3</button> 32 <button>按钮4</button> 33 <button>按钮5</button> 34 35 <div id="box"> 36 哈哈哈<div id="aaa"></div> 37 </div> 38 39 40 <script> 41 var oBtns = document.getElementsByTagName("button"); 42 for (var i = 0; i < oBtns.length; i++) { 43 oBtns[i].onclick = function () { 44 for (var j = 0; j < oBtns.length; j++) { 45 oBtns[j].className = ''; 46 } 47 this.className = 'active'; 48 } 49 } 50 51 document.getElementById('box').onmouseenter = function () { 52 this.children[0].style.display = 'block'; 53 }; 54 55 document.getElementById('box').onmouseleave = function () { 56 this.children[0].style.display = 'none'; 57 }; 58 59 </script> 60 </body> 61 </html>
tab选项卡
选中当前对应的标签显示该标签下方对应显示的内容
实现思想：
选中当前的标签时候，记录当前标签的下标，对应下方的标签就可以根据下标值获取内容
这里边遇到一个变量提升的坑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
100%;
overflow: hidden;
}
ul li{
float: left;
160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script type="text/javascript">
//es5
/*
var oLis = document.getElementsByTagName("li");
var oPs = document.getElementsByTagName("p");
var i; // 变量提升
for (i=0; i<oLis.length; i++){
oLis[i].index = i;
oLis[i].onclick = function () {
for (var j=0; j<oLis.length; j++) {
oLis[j].className = '';
oPs[j].className = '';
}
this.className = 'active';
oPs[this.index].className = 'active';
}
}
*/
// es6
let oLis = document.getElementsByTagName("li");
let oPs = document.getElementsByTagName("p");
for (let i=0; i<oLis.length; i++){
oLis[i].index = i;
oLis[i].onclick = function () {
for (let j=0; j<oLis.length; j++) {
oLis[j].className = '';
oPs[j].className = '';
}
this.className = 'active';
oPs[this.index].className = 'active';
}
}
</script>
</body>
</html>