탭 제이쿼리 단일 페이지에서 여러가지 내용 보여줄 때

한 개의 페이지에서

각기 다른 내용을 보여주고 싶을 때 유용하게 사용 할 수 있다.

위와 같이 스크립트 구문을 넣은뒤...

*{
	margin:0;
	padding:0;
}
#container{
	width:1024px;
	margin:40px auto;
}
.intro {
width:200px;
position:absolute;
margin:-20px 0 450px 0;
}
ul.tab{
font-weight: bold;
	padding:0;
	margin:0 0 0 505px;
}
ul.tab li{
	list-style-type:none;
	width:100px;
	height:60px;
	float:left;
}
ul.tab li a{
	outline:none;
	display:block;
	color:#444444;
	line-height:50px;
	text-align:center;
	border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border: 1px solid #cbcbcb;
}
ul.tab li a.selected{
	background: url('something_your_image.jpg') no-repeat left top;
	text-decoration:none;
	color:#3a3a3a;
	cursor:default;
	border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border: 1px solid ##cbcbcb;
}
ul.panel{
	clear:both;
	border:1px solid red
	border-top:none;
	padding:0;
	padding-top:30px;
}
ul.panel li{
	list-style-type:none;

	color:#333;
}

이렇게 작성 후...

DOM 구조를 아래와 같이 해준다.

		

			

				
1
				
2
				
3
				
4
				
5