tab切换原生js新手

来源：互联网发布：java开源的cms 编辑：程序博客网时间：2024/06/16 18:48

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<style>
#box{
width:400px;
height:400px;
border:1px solid red;
margin:0 auto;
}
header{
height:80px;
width:399px;
border:1px solid green;
}
header ul{
list-style-type: none;
word-spacing:80px;
}
header ul li{
display:inline-block;
line-height: 40px;

}

a{
text-decoration: none;
color:#000;
}
a:hover{
text-decoration: none;
color:red;
}
footer{
width:390px;
height:50%;
border:1px solid #fff;
}
footer ul{
list-style-type: none;
}
footer ul li{
display: none;
}
#div1{
width:398px;
height:340px;
background-color: red;
position: absolute;
top:60px;
display: none;
}
</style>
<body>
<div id="box">
<header>
<ul>
<li><a href="#" id="qjg">关羽</a></li>
<li><a href="#" id="rhx">张飞</a><span class="glyphicon glyphicon-triangle-bottom" id="xialai" style="margin-top:30px;"></span></li>
<li><a href="#" id="zx">刘备</a></li>
</ul>
</header>
<footer>
<ul>
<li style="display:block;" id="qjg1">好与不好都走了，幸与不幸都过了。真正的梦想，永远在实现之中，更在坚持之中。</li>
<li id="rhx1">
太在乎别人的眼光和评价，只会让自己做事放不开手脚，犹豫不决。</li>
<li id="zx1">请磨掉自己身上的躁气和戾气，平静地面对生活。</li>
</ul>
</footer>
<div id="div1">
wqeqweqweqw
</div>
</div>
<script>
window.onload=function () {
var qjg=document.getElementById('qjg');
var rhx=document.getElementById('rhx');
var zx=document.getElementById('zx');
var xialai=document.getElementById('xialai');
var oDiv=document.getElementById('div1');
rhx.onmouseover=function () {
qjg1.style.display='none';
rhx1.style.display='block';
}
zx.onmouseover=function () {
qjg1.style.display='none';
rhx1.style.display='none';
zx1.style.display='block';
}
qjg.onmouseover=function () {
qjg1.style.display='block';
rhx1.style.display='none';
zx1.style.display='none';
}
xialai.onmouseover=function () {
oDiv.style.display='block';
}
xialai.onmouseout=function () {
oDiv.style.display='none';
}
};
</script>
</body>

</html>

WEB前端学习交流群21 598399936

阅读全文

0 0