onclick 탭에 관해 도움을? 정보
onclick 탭에 관해 도움을?
본문
| A | B | C | |||
|
|||||
위와 같이 있을경우에
A를 클릭하면 아래의 1 만 보이고
B를 클릭하면 아래에 1과 2가 보이고
C를 클릭하면 아래에 1과 2와 3이 보이게
이렇케 할려면 어떻케 해야할까요..
혹시 방법을 알고 계시거나 소스를 가지고 계신분이 있다면
좀 알려주세요...
미리 ,, 감사합니다.
댓글 전체
최신글탭방식 스킨란에 검색해보면 나와요
<?
$_img_url = "http://xxxx.cafe24.com/tab_latest1/"; //탭이미지 경로
$_zb_path = "/home/hosting_users/아이디/www/bbs/";
$_zb_url = "http://xxxx.cafe24.com/bbs/";
include $_zb_path."outlogin.php";
?>
<head>
<script language="javascript">
function tab_img_change(t){
for(var i = 1; i <= 3; i++) {
img = document.getElementById('tab_bbs'+i);
img.src = "<?=$_img_url?>tab"+i+"_off.gif";
eval("document.getElementById('tab_view"+i+"')").style.display="none";
if ( t == i ) {
img.src = "<?=$_img_url?>tab"+i+"_on.gif";
eval("document.getElementById('tab_view"+i+"')").style.display="";
}
}
}
</script>
</head>
<table align="center" cellpadding="0" cellspacing="0" width="343">
<tr>
<td width="343" height="33" colspan="2"><img src="<?=$_img_url?>web01.gif"><img id="tab_bbs1" style="cursor:pointer;" onclick="tab_img_change(1)" src="<?=$_img_url?>tab1_on.gif" /><img id="tab_bbs2" style="cursor:pointer;" onclick="tab_img_change(2)" src="<?=$_img_url?>tab2_off.gif" /><img id="tab_bbs3" style="cursor:pointer;" onclick="tab_img_change(3)" src="<?=$_img_url?>tab3_off.gif" /><img src="<?=$_img_url?>web02.gif">
</td>
</tr>
<tr>
<td width="21" height="111">
</td>
<td width="324" height="111">
<div id="tab_view1">
<? print_bbs("narabbs","공지사항","gong_gi",5, 27)?>
</div>
<div id="tab_view2" style="display: none">
<? print_bbs("narabbs","질문답변","qna_min",5, 27)?>
</div>
<div id="tab_view3" style="display: none">
<? print_bbs("narabbs","입금확인","online",5, 27)?>
</div>
</td>
</tr>
</table>
<?
$_img_url = "http://xxxx.cafe24.com/tab_latest1/"; //탭이미지 경로
$_zb_path = "/home/hosting_users/아이디/www/bbs/";
$_zb_url = "http://xxxx.cafe24.com/bbs/";
include $_zb_path."outlogin.php";
?>
<head>
<script language="javascript">
function tab_img_change(t){
for(var i = 1; i <= 3; i++) {
img = document.getElementById('tab_bbs'+i);
img.src = "<?=$_img_url?>tab"+i+"_off.gif";
eval("document.getElementById('tab_view"+i+"')").style.display="none";
if ( t == i ) {
img.src = "<?=$_img_url?>tab"+i+"_on.gif";
eval("document.getElementById('tab_view"+i+"')").style.display="";
}
}
}
</script>
</head>
<table align="center" cellpadding="0" cellspacing="0" width="343">
<tr>
<td width="343" height="33" colspan="2"><img src="<?=$_img_url?>web01.gif"><img id="tab_bbs1" style="cursor:pointer;" onclick="tab_img_change(1)" src="<?=$_img_url?>tab1_on.gif" /><img id="tab_bbs2" style="cursor:pointer;" onclick="tab_img_change(2)" src="<?=$_img_url?>tab2_off.gif" /><img id="tab_bbs3" style="cursor:pointer;" onclick="tab_img_change(3)" src="<?=$_img_url?>tab3_off.gif" /><img src="<?=$_img_url?>web02.gif">
</td>
</tr>
<tr>
<td width="21" height="111">
</td>
<td width="324" height="111">
<div id="tab_view1">
<? print_bbs("narabbs","공지사항","gong_gi",5, 27)?>
</div>
<div id="tab_view2" style="display: none">
<? print_bbs("narabbs","질문답변","qna_min",5, 27)?>
</div>
<div id="tab_view3" style="display: none">
<? print_bbs("narabbs","입금확인","online",5, 27)?>
</div>
</td>
</tr>
</table>
감사합니다. 그런데 제가 질문한 답변이 아니네요..
다시 말씀드리면 B를 클릭시 1과 2와 3이 동시에 출력되는 방법은 질문한것데???
다시 말씀드리면 B를 클릭시 1과 2와 3이 동시에 출력되는 방법은 질문한것데???
<span onClick="show('1');">A</span>
<span onClick="show('1','2');">B</span>
<span onClick="show('1','2','3');">C</span>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<script>
function show()
{
div1.style.display = div2.style.display = div3.style.display = "none";
for (var i = 0; i < arguments.length; i++)
{
document.getElementById("div" + arguments[i]).style.display = "";
}
}
</script>
<span onClick="show('1','2');">B</span>
<span onClick="show('1','2','3');">C</span>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<script>
function show()
{
div1.style.display = div2.style.display = div3.style.display = "none";
for (var i = 0; i < arguments.length; i++)
{
document.getElementById("div" + arguments[i]).style.display = "";
}
}
</script>
감사합니다. 덕분에 해결하였습니다.