今天再向大家分享一种另类变相的选项卡,可做效果演示,也可作二级导航栏。
要点:1和先前分享的选项卡原理基本上一样,都是通过控制display的属性值来达到想要的效果。2需要考虑显示顺序,鼠标移动触发事件中没有定义鼠标时左移动还是右移动,所以需要通过其他方法来解决这个问题。不要把问题复杂化,目的只有一个,当鼠标在一耳导航区域的时候,只有一个内容模块显示。所以用排除法相对来说更简单点儿……
废话不多说,下面是源码……
期待着和你提的宝贵意见和技术交流。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabControl04</title>
<meta name="author" content="Administrator" />
<!-- Date: 2014-06-18 -->
<style type="text/css">
body{margin:0;padding:0;}
.content{margin:0 auto; width:1002px;height:500px;background: #CCCCCC;}
.menu{width:98px;height:500px;float:left;background:#0099CC;border-right:2px solid #666666;font-size:80px;}
.showdiv{width:502px;height:500px;float:left;display:none;background:#CCCCFF;font-size:100px;}
.showdiv1{width:502px;height:500px;float:left;background:#CCCCFF;font-size:100px;}
</style>
<script type="text/javascript">
function TabControl(n){
for(var i=0;i<5;i++){
if(i==n){
var s=document.getElementById("show"+n);
s.style.display="block";
}else{
var s=document.getElementById("show"+i);
s.style.display="none";
}
}
}
function disappear(m){
var d=document.getElementById("show"+m);
d.style.display="none";
}
</script>
</head>
<body>
<div class="content">
<div class="menu" οnmοusemοve="TabControl(0)">A</div>
<div class="showdiv" id="show0" οnmοuseοut="disappear(0)">1</div>
<div class="menu" οnmοusemοve="TabControl(1)">B</div>
<div class="showdiv" id="show1" οnmοuseοut="disappear(1)">2</div>
<div class="menu" οnmοusemοve="TabControl(2)">C</div>
<div class="showdiv" id="show2" οnmοuseοut="disappear(2)">3</div>
<div class="menu" οnmοusemοve="TabControl(3)">D</div>
<div class="showdiv" id="show3" οnmοuseοut="disappear(3)">4</div>
<div class="menu" οnmοusemοve="TabControl(4)">E</div>
<div class="showdiv1" id="show4" οnmοuseοut="disappear(4)">5</div>
</div>
</body>
</html>