浅谈CSS+jQuery实现标签页

最新推荐文章于 2024-01-09 16:02:28 发布

筱葭

最新推荐文章于 2024-01-09 16:02:28 发布

阅读量424

点赞数 1

分类专栏： CSS jQuery 文章标签： CSS jQuery 标签页

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53769259

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

jQuery

30 篇文章 0 订阅

订阅专栏

CSS代码：

#tabs{
	width:600px;
	height:250px;
	background:white;
	margin:20px;
}
#tabs ul{
	float:left;  
	margin:20px 0 0 20px;  
	padding:0; 
}
#tabs li{  
	width:80px;  
	height:40px;  
	line-height:40px;  
	display:inline-block;  
	text-align:center;  
	border-bottom:1px solid grey;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background:#eeeeee;
	position:relative; 
	top:1px;
}  
#tabs li:hover{
	color:#aaaaaa;
	cursor:pointer;
}
.items{
	width:560px;  
	height:175px;  
	font-size:16px;   
	text-align:center;  
	border:1px solid grey;  
	float:left;
	margin-left:20px;  
}

jQuery代码：

$(document).ready(function(){
	$("li").bind("click",function(){
		$(".items").hide();
		$("#"+$(this).attr("name")).show();
		$("li").css({
			"border-top":"1px solid white",
			"border-left":"1px solid white",
			"border-right":"1px solid white",
			"border-bottom":"1px solid grey",
			"background":"#eeeeee"
		});
		$(this).css({
			"border-top":"1px solid grey",
			"border-left":"1px solid grey",
			"border-right":"1px solid grey",
			"border-bottom":"1px solid white",
			"background":"white"
		});
	});
	$("li:first-child").click();
});