动态tab选项卡! 纯JS+CSS

最新推荐文章于 2024-06-06 10:02:59 发布

com_zyq

最新推荐文章于 2024-06-06 10:02:59 发布

阅读量160

点赞数

分类专栏： web前端文章标签： CSS XHTML HTML

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
<!--
.menu{
	height: 39px;
	width: 1000px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.menu .item{
	float: left;
	height: 30px;
	width: 80px;
	font-size: 16px;
	color:#000000;
	line-height: 30px;
	font-weight: bold;
	text-align:center;
	margin-left:15px;
	margin-top:3px;
	cursor: pointer;
}
.menu .item_sel {
	float: left;
	height: 30px;
	width: 80px;
	font-size: 16px;
	color:#000099;
	line-height: 30px;
	font-weight: bold;
	text-align:center;
	margin-left:15px;
	margin-top:3px;
	cursor: pointer;
	background-color:#999999;
}
-->
</style>

<script type="text/javascript" >

		var documentDivCount = document.getElementsByTagName("div");  //全局变量, 所有div的值
		//页面加载初始化
		window.onload=function(){
			setMenuDiv();
			initializeMenu();
		}	

		//设置菜单onclick事件
		function setMenuDiv(){
			for(i = 0; i < documentDivCount.length; i++) {
				if(documentDivCount[i].className == "item"){
					documentDivCount[i].onclick = function (){setMenuOnclickClassName(this);}
					documentDivCount[i].TABINDEX = i;
				}
			}
		}

		function initializeMenu(){
			for(i = 0; i < documentDivCount.length; i++) {
				if(trim(documentDivCount[i].className) == "item"){
					addClass(documentDivCount[i],"item_sel");
					break
				}
			}
		}

		//鼠标单击菜单 添加Class
		function setMenuOnclickClassName(obj){
			for(i = 0; i < documentDivCount.length; i++) {
				if(trim(documentDivCount[i].className) == "item" || documentDivCount[i].className == "item item_sel"){
					if(obj.TABINDEX ==  documentDivCount[i].TABINDEX){
						if(trim(obj.className) == "item"){
							addClass(obj,"item_sel");
							continue
						}else{
							removeClass(obj,"item_sel");
							continue
						}
					}else{
						removeClass(documentDivCount[i],"item_sel");
					}
				}
			} 
		}

		//清除空格
		function trim(string)
		{
			return string.replace(/(^\s*)|(\s*$)/g, "");
		}

		//检索class
		function hasClass(element, className) {     
			var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');     
			return element.className.match(reg); 
		}  
		//添加class
		 function addClass(element, className) {     
			if (!this.hasClass(element, className)) {
				element.className += " "+className;    
			 }
		 }  
		 //删除class
		 function removeClass(element, className) {    
		  if (hasClass(element, className)) {         
		  	var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');        
		   	element.className = element.className.replace(reg,'');     
		   } 
		  } 

	</script>
</head>

<body>
	<div class="menu">
		<div class="item">首页</div>
		<div class="item">走进TF</div>
		<div class="item">产品中心</div>
		<div class="item">新闻中心</div>
		<div class="item">研发中心</div>
		<div class="item">营销网络</div>
		<div class="item">精英团队</div>
		<div class="item">招贤纳士</div>
		<div class="item">联系我们</div>
	</div>
</body>
</html>