JS实现栅栏式选项卡

最新推荐文章于 2022-07-01 16:40:09 发布

笨-大叔

最新推荐文章于 2022-07-01 16:40:09 发布

阅读量1k

点赞数

分类专栏： JS 文章标签：图层切换脚本选项卡菜单 js

本文链接：https://blog.csdn.net/u014703834/article/details/32710019

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

今天再向大家分享一种另类变相的选项卡，可做效果演示，也可作二级导航栏。

要点：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>