利用css和js实现页面的标签效果。(标签个数可以动态变化)

利用css和js实现页面的标签效果

css

<style>
.menu{  
 margin-bottom:-15px;
 width: 800px;  
}  
.menu li{  
 display:block;  
 float: left; 
 font-weight: bold;
 font-size: 12px; 
 padding: 2px 0;  
 width:120px;  
 text-align: center;  
 cursor:pointer;  
 background: #A9A9A9;  
 border-top:1px solid #FFFFFF;
 border-left:1px solid #FFFFFF;
 border-right:1px solid #FFFFFF;
}  
.menu li.hover{  
 background: #FFFFFF;  
 border-top:1px solid #A9A9A9;
 border-bottom;1px solid #A9A9A9;
 border-left:1px solid #A9A9A9;
 border-right:1px solid #A9A9A9;
}
#menuContent ul{  
 display: none;  
}  
#menuContent ul.block{  
 display: block;  
}
</style>

js

说明：

这里的初期化函数看起来比较复杂，实际上是为了动态控制显示标签而设计的。

当第一个标签不显示时，第二个标签的初始状态就为动作不可。

<script type="text/javascript" src="./jquery-1.8.js"></script>
<script>	
$(document).ready(function(){  
    iniKindTab();
});

function iniKindTab(){
	
		// JS操作的数据存在的情况下
		if(document.getElementById("mainMenu")!=null){	
		
			// Tab内容的初期胡处理
			var dtiComShopAndWallet=document.getElementById("mainMenu").getElementsByTagName("li");  
			// 
			var dliComShopAndWallet=document.getElementById("mainMenuContent").getElementsByTagName("ul");  
			
			// 有三个Tab，有的Tab可能不显示，第一个被显示的Tab的位置（三个Tab，索引分别为0,1,2）
			// 默认第一个Tab一开始就被显示
			var indexShowTab = 0;
			
			var indexShowTabflg = true;
			for(i=0;i<dtiComShopAndWallet.length;i++){  
			
				if(indexShowTabflg){
					if(dtiComShopAndWallet[i].style.display!='none'){
						
						indexShowTab = i;
						indexShowTabflg = false;
					}
				}
				
				dtiComShopAndWallet[i].className="";  
				dliComShopAndWallet[i].style.display="none";
			} 
			
			// 显示在第一个位置的tab是不能点击的
			dtiComShopAndWallet[indexShowTab].className="hover";
			// 显示位置开始的Tab中向对应的内容
			dliComShopAndWallet[indexShowTab].style.display="block";
		
		}
		
	}

	function setTab(menu,index){  
		var menu=document.getElementById("mainMenu").getElementsByTagName("li");  
		var menuContent=document.getElementById("mainMenuContent").getElementsByTagName("ul");  
		for(i=0;i<menu.length;i++){  
		 	menu[i].className=i==index?"hover":"";  
		 	menuContent[i].style.display=i==index?"block":"none";  
		}  
	}
</script>

HTML

<div id="tabs1">  
	<ul class="menu" id="mainMenu">  
		<li οnclick="setTab(mainMenu,0)" class="hover">Tab1</li>
		<li οnclick="setTab(mainMenu,1)" class="hover">Tab2</li>
		<li οnclick="setTab(mainMenu,2)" class="hover">Tab3</li>
		<li οnclick="setTab(mainMenu,3)" class="hover">Tab4</li>	
		<li οnclick="setTab(mainMenu,4)" class="hover">Tab5</li>			
	</ul>
<BR>
<BR>
	<div class="menuContent " id="mainMenuContent">
		<ul>标签1中的内容</ul>
		<ul>标签2中的内容</ul>
		<ul>标签3中的内容</ul>
		<ul>标签4中的内容</ul>
		<ul>标签5中的内容</ul>
	</div>
</div>

通过以上代码实现。

总结：

通过这种方式实现的好处是标签的个数可以动态的变化。