我实现的比较简单,鼠标移上去和鼠标离开分别有函数,可能相对麻烦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<style>
a{color:black;}
a:hover{color:blue}
ul li{
list-style: none;
float:left;
border:1px solid gray;
width:100px;
text-align: center;
height:50px;
line-height:50px;
}
ul li:hover{
color:blue;
cursor: pointer;
}
</style>
<script>
function fun(name){
var a=document.getElementById(name+"_con");
if(a.style.display=="none")
{
a.style.display="block";
}
}
function func(name){
var a=document.getElementById(name+"_con");
if(a.style.display=="block")
{
a.style.display="none";
}
}
</script>
</head>
<body>
<div>
<ul>
<li id="one" οnmοuseοver="fun('one')" οnmοuseοut="func('one')">孟美岐</li>
<li id="two" οnmοuseοver="fun('two')" οnmοuseοut="func('two')">吴宣仪</li>
<li id="three" οnmοuseοver="fun('three')" οnmοuseοut="func('three')">exy</li>
</ul>
</div>
<div style="width:305px;height:200px;border:2px solid black;margin-left:40px;margin-top:50px;text-align: center;">
<div style="display: none;" id="one_con">
孟美岐孟美岐孟美岐孟美岐孟美岐
</div>
<div style="display: none;" id="two_con">
吴宣仪吴宣仪吴宣仪吴宣仪吴宣仪
</div>
<div style="display: none;" id="three_con">
exyexyexyexyexy
</div>
</div>
</body>
</html>