tab选项卡

<style type="text/css">
.tabBar {
	width: 100%;
	font-family: "Microsoft YaHei";
}

.tabBar .hd ul {
	z-index: 5;
	position: relative;
	zoom: 1;
}

.tabBar .hd li {
	float: left;
	height: 24px;
	line-height: 24px;
	margin-top: 4px;
	padding: 0px 16px 0px 16px;
	margin-right: 5px;
	color: #333333;
	border: 1px solid #c8d1d5;
	border-bottom: 0px;
	cursor: pointer;
}

.tabBar .hd li.on {
	height: 27px;
	line-height: 32px;
	font-weight: bold;
	overflow: hidden;
	margin-top: 0px;
	position: relative;
	top: 1px;
	border-top: 2px solid #004ea2;
	background: #fff;
}

.tabBar .bd {
	border-top: 1px solid #C8D1D5;
	padding: 10px 40px 0 40px;
}
</style>

  

<div class="tabBar">
		<div class="hd">
			<ul>
				<li class="on">基本信息</li>
				<li>业务数据</li>
			</ul>
		</div>
		<div class="bd">
			<iframe id="fm" scrolling="no"
				src="" style="" width="100%;" height="100px;" frameborder="0"></iframe>
		</div>
	</div>

  

$(".hd li").click(function() {
				$(this).siblings().removeClass("on");
				$(this).attr("class", "on");
				
				var url = "";
				switch($(this).index()){
					case 0:
						url = "";
						break;
					case 1:
						url = "";
						break;
				}
				$("#fm").attr("src",url);
			});

  

posted @ 2015-11-26 10:49  雪卜  阅读(136)  评论(0编辑  收藏  举报