탭메뉴질문드립니다 ㅜㅜ
본문
탭을 만들었는데요 ㅠㅠ 2번탭이먼저 보여지게 하고싶은데 버튼은 2번이먼저 선택되게 되었는데
2번탭에관련된 이미지가나와야되는데 1번이미지가먼저 보여서요 ㅠㅠ 해결방법 이있을까요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 해당 소스랑 설명을 잘못해서 설명이미지 첨부합니다!ㅠㅠ
<script type="text/javascript">
function main_tab(arr_no) {
var tab = new Array("sm365_menu01","sm365_menu02","sm365_menu03");
var div = new Array("sm365_menu_div01","sm365_menu_div02","sm365_menu_div03");
/*var more = new Array("../bbs/board.php?bo_table=d1","../bbs/board.php?bo_table=d2","../bbs/board.php?bo_table=d3");*/
var num = new Array(1,2,3);
for(i=0;i<num.length;i++) {
document.getElementById(div[i]).style.display="none";
document.getElementById(tab[i]).className="off";
}
document.getElementById(div[arr_no]).style.display="";
document.getElementById(tab[arr_no]).className="on";
document.getElementById("menu_more").href=more[arr_no];
}
</script>
<!--탭시작-->
<div id="sm365_tab_title">
</div>
<div id="sm365_tab_all">
<div id="sm365_port_tab">
<ul class="tab1">
<li><a href="javascript:main_tab(0);" class="off" name="sm365_menu01" id="sm365_menu01" onmouseover="this.src='images/main_tap1_push.jpg';" onmouseout="this.src='images/main_tap1.jpg';"></a></li>
<li><a href="javascript:main_tab(1);" class="on" name="sm365_menu01" id="sm365_menu02" onmouseover="this.src='images/main_tap2_push.jpg';" onmouseout="this.src='images/main_tap2.jpg';"></a></li>
<li><a href="javascript:main_tab(2);" class="off" name="sm365_menu01" id="sm365_menu03" onmouseover="this.src='images/main_tap3_push.jpg';" onmouseout="this.src='images/main_tap3.jpg';"></a></li>
</ul>
<div class="sm365_tab_in_wap">
<div class="sm365_tab_in">
<!--탭1시작-->
<div id="sm365_menu_div01">
<div id="sm365_menu_1_title">
</div>
<div id="sm365_menu_1_cont">
</div>
</div>
<!--탭1끝-->
<!--탭2시작-->
<div id="sm365_menu_div02" style="display:none">
<div id="sm365_menu_2_title">
</div>
<div id="sm365_menu_2_cont">
</div>
</div>
<!--탭2끝-->
<!--탭3시작-->
<div id="sm365_menu_div03" style="display:none">
<div id="sm365_menu_3_title">
</div>
<div id="sm365_menu_3_cont">
</div>
</div>
<!--탭3끝-->
</div>
</div>
</div>
</div>
답변 1
아래처럼 작성자분이
li에 들어가는 번호값과
div만 연결해주시면 될것같아요
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
.container{width:640px;max-width:640px;margin:0 auto}
.tabs{width:100%}
.tabs:after{display:block;clear:both;content:""}
.tabs li{float:left;padding:0 20px;list-style:none;}
.tab_contents{width:100%}
.tab_content{display:none;}
.tab_content.first{display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('ul.tabs li').click(function() {
var activeTab = $(this).attr('data-tab');
$('ul.tabs li').removeClass('first');
$('.tab_content').removeClass('first');
$(this).addClass('first');
$('#' + activeTab).addClass('first');
})
});
</script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="tab" data-tab="tab2"><a href="#"><input type="radio" name="chk_info" value="HTML">탭첫번째</a></li>
<li class="tab first" data-tab="tab1"><a href="#"><input type="radio" name="chk_info" value="HTML">탭두번째</a></li>
<li class="tab" data-tab="tab3"><a href="#"><input type="radio" name="chk_info" value="HTML">탭세번째</a></li>
</ul>
<div class="tab_contents">
<div class="tab_content first" id="tab1">
<img src="./coffee1.jpg">
</div>
<div class="tab_content" id="tab2">
<img src="./coffee2.jpg">
</div>
<div class="tab_content"id="tab3">
<img src="./coffee3.jpg">
</div>
</div>
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
