Tab형 최근 게시물 구현 방법
웹 이야기/Tip&Tech 2008/11/16 09:51
1. 먼저 아래와 같은 스크립트를 만든다.
간단한 스크립트지만...기능은 뛰여난듯..쉽게 여러개 탭 추가 가능하다 ..ID값을 변경해주면 된다.
2. html코드는 아래와 같이 작성해보자..
여기에서 탭을 몇개 더 추가하고 싶으면 위에 코드에서 one1을 two1, con_one_1을 con_two_1로 수정하면 된다.
3. CSS는 아래와 같이 대충 작성
이로서 대충 이쁘장한 탭형 최근 게시물 정도가 구현된다는.....호랑이 담배피울때 얘기.
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"current_sidebar":"";
con.style.display=i==cursel?"block":"none";
}
}
간단한 스크립트지만...기능은 뛰여난듯..쉽게 여러개 탭 추가 가능하다 ..ID값을 변경해주면 된다.
2. html코드는 아래와 같이 작성해보자..
- Tab1
- Tab2
- Tab3
리스트1리스트2리스트3
여기에서 탭을 몇개 더 추가하고 싶으면 위에 코드에서 one1을 two1, con_one_1을 con_two_1로 수정하면 된다.
3. CSS는 아래와 같이 대충 작성
body,div,ul,li{
padding:0;
text-align:center;
}
body{
font:12px "굴림";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{ list-style:none;}
/*메뉴class*/
.Menubox {
width:50%;
background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:114px;
text-align:center;
color:#949694;
font-weight:bold;
}
.Menubox li.hover{
padding:0px;
background:#fff;
width:116px;
border-left:1px solid #A8C29F;
border-top:1px solid #A8C29F;
border-right:1px solid #A8C29F;
background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);
color:#739242;
font-weight:bold;
height:27px;
line-height:27px;
}
.Contentbox{
width: 50%;
clear:both;
margin-top:0px;
border:1px solid #A8C29F;
border-top:none;
height:181px;
text-align:center;
padding-top:8px;
}
이로서 대충 이쁘장한 탭형 최근 게시물 정도가 구현된다는.....호랑이 담배피울때 얘기.
