效果如下：
163邮箱切换练习
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offHight思路</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 400px;
border: 1px solid red;
/*margin: 50px auto;*/
/*或者*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#left{
width: 100px;
height: 400px;
float: left;
/*border: 1px solid yellow;*/
position: relative;
}
#ul1{
list-style-type: none;
}
#ul1 li{
/*width: 100px;
height: 100px;
text-align: center;
/*怪异盒模型*/
box-sizing: border-box;
border: 1px solid gray;
line-height: 100px;*/
/*或者*/
width: 100px;
height: 100px;
text-align: center;
border: 1px solid gray;
line-height: 98px;
}
.active{
background-color: yellow;
}
#slider{
border: 25px solid transparent;
border-right-color: darkgray;
position: absolute;
top: 0;
right: 0;
transition: all 0.5s;
}
#right{
float: right;
}
#right div{
width: 300px;
height: 400px;
font-size: 100px;
display: none;
/*强制英文单词断行*/
word-break: break-all;
/*或者*/
/*word-break: break-word;*/
}
#right div:nth-child(1){
background-color: red;
}
#right div:nth-child(2){
background-color: orange;
}
#right div:nth-child(3){
display: block;
background-color: blue;
}
#right div:nth-child(4){
background-color: pink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<ul id="ul1">
<li class="active">163邮箱</li>
<li>126邮箱</li>
<li>yeah.net</li>
<li>网易手机邮箱</li>
</ul>
<div id="slider"></div>
</div>
<div id="right">
<div>163邮箱</div>
<div>126邮箱</div>
<div>yeah.net</div>
<div>网易手机邮箱</div>
</div>
</div>
</body>
<script type="text/javascript">
var ul1 = document.getElementById("ul1");
var lis = document.getElementsByTagName("li");
var slider = document.getElementById("slider");
var right = document.getElementById("right");
var divs = right.getElementsByTagName("div");//四个页面
//获取高度 offsetHeight,
//获取宽度 ffsetWidth,
//定位上边距的数值 offsetTop
//定位左边距 offsetLeft
var t = (lis[0].offsetHeight-slider.offsetHeight)*0.5; //居中
//设置滑块top
slider.style.top = t + "px";
for(var i=0;i<lis.length;i++){
lis[i].index = i;//记录下标
//添加点击事件
lis[i].onclick = function(){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
divs[j].style.display = "none";//全部隐藏
}
this.className = "active";
//显示对应的页面
divs[this.index].style.display = "block";
//改变滑块的位置
// 每次增加 当前下标*100(li的高度)
// 点击第一个 0*100 +t
// 点击第二个 1*100 +t
slider.style.top = this.index*lis[0].offsetHeight + t +"px";
}
}
</script>
</html>
