페이지 이동없이 텝 메뉴를 통해 한페이지내 여러 내용을 담고 싶을때 아래와 같은 소스로 구현할수있다.
필요한 요소는 CSS / SCRIPT / HTLM 소스 되시겠다.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel li").hide();
$($(this).attr("href")).show();
return false;
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:500px;
margin:50px auto;
}
ul.tab{
padding:0;
}
ul.tab li{
list-style-type:none;
width:100px;
height:40px;
float:left;
}
/* 미선택시 css*/
ul.tab li a{
outline:none;
background:url("https://t1.daumcdn.net/cfile/tistory/17710F454FEE42C132");
display:block;
color:blue;
line-height:40px;
text-align:center;
}
/* 선택시 css*/
ul.tab li a.selected{
background:url("https://t1.daumcdn.net/cfile/tistory/18710F454FEE42C133");
text-decoration:none;
color:#333;
cursor:default;
}
ul.panel{
clear:both;
border:1px solid #9FB7D4;
border-top:none;
padding:0;
}
ul.panel li{
list-style-type:none;
padding:10px;
text-indent:1em;
color:#333;
}
</style>
</head>
<body>
<ul class="tab">
<li><a href="#tab1" class="selected">내용 1</a></li>
<li><a href="#tab2">내용 2</a></li>
</ul>
<ul class="panel">
<li id="tab1">
내용 1
</li>
<li id="tab2">
내용 2
</li>
</ul>
</body>
</html>
[결과]
- 내용 1
- 내용 2
'개발 > PHP' 카테고리의 다른 글
| [selectbox] 대분류 중분류 필터 // 선택적 초이스 할때 (0) | 2017.08.24 |
|---|---|
| ajax - json을 이용한 아작스 간단예제 (0) | 2017.08.16 |
| 버튼을 통한 아래 메뉴 혹은 탭 페이지 구현 (0) | 2017.05.01 |
| input 동적 추가/삭제 하기 (0) | 2016.11.08 |
| 데이터 파싱 서버에서 off 일경우 // 데이터 파싱이 안될때 (0) | 2016.11.04 |