<div class="tab">
<ul class="tabTitle">
<li>用户管理</li>
<li>配置管理</li>
<li>角色管理</li>
<li>定时任务</li>
</ul>
<div class="info">
<div>用户管理</div>
<div>配置管理</div>
<div>角色管理</div>
<div>定时任务</div>
</div>
</div>
*{
padding:0;
margin:0;
}
li{
list-style: none;
}
.tab{
width: 500px;
margin:30px auto;
}
.tab ul{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.tab ul li{
padding:0 10px;
height: 50px;
line-height: 50px;
border:1px solid #ddd;
cursor: pointer;
position: relative;bottom: -1px;
background: #fff;
box-sizing: border-box;
}
.tab ul li:first-child{
border-bottom: none;
}
.info{
width: 100%;
border:1px solid #ddd;
}
.info div{
display: none;
}
.info div:first-child{
display: block;
}
window.onload = function() { //网页加载完毕后立即执行的操作
//第一种方法 性能高
var getlis = document.getElementsByClassName('tabTitle')[0].children;
var getDiv = document.getElementsByClassName('info')[0].children;
for (var i = 0; i < getlis.length; i++) {
getlis[i].index=i;
//这里触发事件驱动,点击的时候才会执行函数
getlis[i].onclick = function() {
for (var j = 0; j < getlis.length; j++) {
getlis[j].style.borderBottom="1px solid #ddd"
getDiv[j].style.display="none"
}
this.style.borderBottom="none"
getDiv[this.index].style.display="block"
}
}
//第二种
for (let i = 0; i < getlis.length; i++) {
getlis[i].onclick = (function(i){
return function(){
for (var j = 0; j < getlis.length; j++) {
getlis[j].style.borderBottom="1px solid #ddd"
getDiv[j].style.display="none"
}
this.style.borderBottom="none"
getDiv[i].style.display="block"
}
})(i)
}
}