[jQuery+CSS]꾸밀수 있는 tab 만들기 예제

jQuery+css 를 활용하여 tab 만들기 예제

 

 

 

 

 

위와같은 tab를 jQuery와 css를 이용하여 만드는 방법 입니다.

뭐 jQuery 플러그인을 활용하여 tabs를 하면 아주 손쉽게 적용 할 수 있습니다만.

css를 수정하려면 많은 손이 필요하여 그와 비슷한 기능을 찾던중 좋은 방법이 있어 포스팅 하게 되었습니다.

소스 분석은 그리 어렵지 않습니다.

 

방법?

jQuery의 tabs와 같이 상단 탭의 href 와 그 해당 영역과 같도록 id를 맞춰주면 됩니다.

 

 

css

 

 

	ul.tab {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		height: 32px;
		border-bottom: 1px solid #999;
		border-left: 1px solid #999;
		width: 100%;
	}
	ul.tab li {
		float: left;
		margin: 0;
		padding: 0;
		height: 31px;
		line-height: 31px;
		border: 1px solid #999;
		border-left: none;
		margin-bottom: -1px;
		overflow: hidden;
		position: relative;
		background: #e0e0e0;
	}
	ul.tab li a {
		text-decoration: none;
		color: #000;
		display: block;
		font-size: 1.2em;
		padding: 0 20px;
		border: 1px solid #fff;
		outline: none;
	}
	ul.tab li a:hover {
		background: #ccc;
	}
	html ul.tab li.active, html ul.tab li.active a:hover  {
		background: #fff;
		border-bottom: 1px solid #fff;
	}
	#container {
		border: 1px solid #999;
		border-top: none;
		overflow: hidden;
		clear: both;
		float: left; width: 100%;
		background: #fff;
	}
	.tab_content {
		padding: 20px;
		font-size: 1.2em;
	}

 

html

 

 

	

		
aSector
		
bSector
	

	

		

			
			
aSector
			

			

				
tab예제 섹터1
				
tab예제 섹터1
				
tab예제 섹터1
			
		
		

		   
			
bSector
			

			

				
tab예제 섹터2
				
tab예제 섹터2
				
tab예제 섹터2
			
		
	

 

script