一个标签页效果-优快云博客

本文介绍了一种使用 CSS 和 JavaScript 实现的标签页切换效果。通过简单的 HTML 结构配合 CSS 样式及 JavaScript 代码，实现了标签页的美观展示及内容的动态加载。本文适合前端开发初学者学习。

#div_tab #tab_title{
   height: 25px;
}
#div_tab #tab_title ul{
  list-style: none;
  background-color: #FFFFFF;
  height: 25px; 
}

#div_tab #tab_title li{
	float: left;
	height: 25px;
	line-height:25px;
	text-align: center;
	margin-right: 1px;
}
/*位选中tab按钮样式 
*为浅一点的绿色
*/
#div_tab #tab_title  a{
    text-decoration: none;
	color: #000000;
	display: block;
	width: auto;
	background: url(../../images/tabl_green.gif) no-repeat left;
}
#div_tab #tab_title  a  span{
  display: block;
	background: url(../../images/tabr_green.gif) no-repeat right;
	padding: 0 15px 0 15px;
}
/*连接样式以及默认选中的tab样式
*为深一点的绿色
*/
#div_tab #tab_title  .tagc a:hover ,#div_tab #tab_title  .select{
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(../../images/tabl_dgreen.gif) no-repeat left;
}
#div_tab #tab_title  .tagc a:hover span,#div_tab #tab_title  .selectspan{
	display: block;
	background: url(../../images/tabr_dgreen.gif) no-repeat right;
	padding: 0 15px 0px 15px;
}
/*标签内容层定义*/
#div_tab #tab_content {
	height:94%!important;
	height: 96%;
	margin:0px;
	padding:0px;
}
/*边框样式*/
.content_border {
    border:1px solid #91D65F;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.hidecontent {display:none;}

.frame_catapro{
	width: 100%;
	height:982px !important;
	height: 855px;
	
}

<script>
/**
*切换选框时候要改变的
*tag 标签样式
*content 内容样式
*proframe 放商品信息的frame的ID
*参数说明：
*tabid 标签的id
*url 切换标签时候加载的url
*/
function switchTag(tabid,url)
{
	var  tab="tab";
	var  content="content";
	var  proframe="proframe";
	for(i=1; i <3; i++)//因为只有两个所以这样写 还有别的写法!~
	{
		if (i==tabid)
		{
			document.getElementById(tab+tabid).getElementsByTagName("a")[0].className="select";
			document.getElementById(tab+tabid).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan";
		    document.getElementById(content+tabid).className="";
		    document.getElementById(proframe+tabid).src=url; //这里用iframe模拟ajax
		}else{
			document.getElementById("tab"+i).getElementsByTagName("a")[0].className="";
			document.getElementById("tab"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
		    document.getElementById("content"+i).className="hidecontent";
		}
	}
}
</script>

 <div  id="div_tab">
		        <div id="tab_title">
		           <ul> 
		           <li id="tab1" class="tagc">
		           <a  href="#" onclick="switchTag('1','<%=taburl1%>');this.blur();" class="select">
		           <span class="selectspan">所有商品</span></a></li>
		           <li id="tab2" class="tagc">
		           <a  href="#" onclick="switchTag('2','<%=taburl2%>');this.blur();">
		           <span>分类推荐</span></a></li>
		           <li id="tmore">
		           </li>
		           </ul>
		        </div>  
		        <div id="tab_content" class="content_border">
		             <div id="content1">
		             <iframe  name="proframe1" id="proframe1" class="frame_catapro"  
		               src="" 
		               scrolling="no"  frameborder="0"></iframe>
		             </div>
		             <div id="content2" class=hidecontent>
		               <iframe  name="proframe2" id="proframe2"  class="frame_catapro" src=""
		               scrolling="no"  frameborder="0"></iframe>
		             </div>
		        </div>
		   </div>

效果图:

效果图