选项卡tab实现2

最新推荐文章于 2024-05-07 14:59:35 发布

cound123

最新推荐文章于 2024-05-07 14:59:35 发布

阅读量69

点赞数

文章标签： JavaScript html ViewUI

本文链接：https://blog.csdn.net/cound123/article/details/84515871

版权


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<style>	
	:hover{} /*for ie7*/
	html,body,ul,li{
		margin:0;
		padding:0px;
	}
	ul,li{
		list-style:none;
	}
	#wrap{
		margin:10px;		
		width:500px;		
		border:1px solid rgb(108, 146, 173);
	}
	#wrap .tab{
		height:29px;
		background-color:rgb(234, 240, 253);
	}
	#wrap .tab li{
		float:left;		
	}
	#wrap .tab li a{
		display:inline-block;
		font-weight:bold;
		color:rgb(0, 85, 144);
		height:30px;
		line-height:30px;
		padding:0px 20px;
		border-right:1px solid rgb(108, 146, 173);
		cursor:pointer;
	}	
	#wrap .tab li a:hover{
		background-color:orange;
	}
	#wrap .tab li a.selected{
		background-color:white;
	}
	#wrap .content{
		padding:10px;	
		border-top:1px solid rgb(108, 146, 173);	
	}
	#wrap .content > div{
		height:200px;
		display:none;
	}
	#wrap .content > div.selected{
		display:block;
	}
</style>
<script>
	$(function(){
		$('#wrap').delegate('.tab li','click',function(){
			var $self=$(this);
			//设置tab
			$self.siblings().find('a').removeClass('selected');
			$self.find('a').addClass('selected');
			//设置content
			var $contents=$('#wrap .content > div');
			$contents.removeClass('selected');
			$contents.eq($self.index()).addClass('selected');
		});
	});
</script>
</head>
<body>

	<div id="wrap">
		<ul class="tab">
			<li><a class="selected">tab1</a></li>
			<li><a>tab2</a></li>
			<li><a>tab3</a></li>
			<li><a>tab4</a></li>
		</ul>
		<div class="content">
			<div class="selected">content1</div>
			<div>content2</div>
			<div>content3</div>
			<div>content4</div>
		</div>		
	</div>

</body>
</html>

cound123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡tab实现2

[code="html"]test :hover{} /*for ie7*/ html,body,ul,li{ margin:0; padding:0px; } ul,li{ list-style:none; } #wrap{ margin:10px; width:500px; border:1px ...
复制链接

扫一扫