Tab折页选项卡面板

最新推荐文章于 2021-05-30 19:37:56 发布

baiguodong

最新推荐文章于 2021-05-30 19:37:56 发布

阅读量684

点赞数

分类专栏： web前端UI 文章标签： web前端ui

本文链接：https://blog.csdn.net/yumingbeizhan/article/details/18319345

版权

web前端UI 专栏收录该内容

7 篇文章 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=utf-8" />
<title>Tab</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#eee url(mask.gif);}
/* tabs*/
#tabs{height:30px;overflow:hidden;}
#tabs li{float:left;margin:0 -15px 0 0;display:inline;}
#tabs a{float:left;position:relative;padding:0 40px;height:0;line-height:30px;text-transform:uppercase;text-decoration:none;color:#fff;border-right:30px solid transparent;border-bottom:30px solid #3D3D3D;border-bottom-color:#777\9;opacity:.3;filter:alpha(opacity=30);}
#tabs a:hover{border-bottom-color:#2ac7e1;opacity:1;filter:alpha(opacity=100);}
#tabs #current{z-index:3;border-bottom-color:#3d3d3d;opacity:1;filter:alpha(opacity=100);}
#content{background:#fff;border-top:2px solid #3d3d3d;padding:2em;}
#content div{display:none;}
#content h2,#content h3,#content p{margin:0 0 15px 0;}  
</style>  
</head>
<body>

<div style="width:720px;margin:40px auto 0 auto;">

  <ul id="tabs">
      <li><a href="#" name="#tab1">One</a></li>
      <li><a href="#" name="#tab2">Two</a></li>
      <li><a href="#" name="#tab3">Three</a></li>
      <li><a href="#" name="#tab4">Four</a></li>    
  </ul>

  <div id="content">
      <div id="tab1">
           Tab one
      </div>
      <div id="tab2">
           Tab two
      </div>
      <div id="tab3">
           Tab three
      </div>
      <div id="tab4">
           Tab four
      </div>
  </div>

</div>  

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function resetTabs(){
	$("#content > div").hide(); //隐藏所有内容
	$("#tabs a").attr("id",""); //重置“id”   
}
(function(){
	$("#content > div").hide(); // 最初隐藏所有内容
	$("#tabs li:first a").attr("id","current"); // 激活第一个选项卡
	$("#content > div:first").fadeIn(); // 显示第一个选项卡的内容

	$("#tabs a").on("click",function(e) {
		e.preventDefault();
		if ($(this).attr("id") == "current"){ //检测当前选项卡
			return       
		}else{             
			resetTabs();
			$(this).attr("id","current"); // 激活这
			$($(this).attr('name')).fadeIn(); // 显示当前选项卡的内容
		}
	});
})()
</script>

</body>
</html>

baiguodong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tab折页选项卡面板

Tab*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#eee url(mask.gif);}/* tabs*/#tabs{height:30px;overflow:hidden;}
复制链接

扫一扫