다음 지도 탭으로 여러개 넣었는데 잘않되네요.
본문
탭으로로 지점 지도를 넣고있습니다.
그런데 지도가 밀리고 짤리고 잘않나오네요..
어디가 문제일까요..?
<!-- 지점 -->
<style type="text/css">
.menu_tab{width:100%;overflow:hidden}
.menu_tab ul{padding:5px 0;border-width:1px 0}
.menu_tab li{list-style:none;position:relative;top:0px;float:left;border:1px solid #ccc;background-color:#ffffff;margin-left:6px;width:110px;}
.menu_tab li a{display:block;padding:8px 5px;text-decoration:none;text-align:center;}
.menu_tab li a:hover{text-decoration:none}
.menu_tab li.active a{background:#0f2857; font-weight:bold;color:#ffffff;}
.menu_tab li.active a:hover{text-decoration:none}
</style>
<script type="text/javascript">
// 탭 메뉴
function tab_menu(num){
var f = $('.menu_tab').find('li');
for ( var i = 0; i < f.length; i++ ) {
if ( i == num) {
f.eq(i).addClass('active');
$('.menu_tab0' + i ).show();
} else {
f.eq(i).removeClass('active');
$('.menu_tab0' + i ).hide();
}
}
}
//전체메뉴보기
function allMenuAc(){
var obj = jQuery(".total_menu");
var objClose = jQuery(".allMenu_close");
}
function allMenuAc_view(){
var obj = jQuery(".total_menu");
obj.show().css({"top":"-400px","height":"390px"}).animate(
{top:0}
,1000
);
}
function allMenuAc_hide(){
var obj = jQuery(".total_menu");
obj.animate(
{top:-400}
,1000
,function(){
obj.hide().css({"height":"0"});
}
);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="menu_tab">
<ul>
<li class="fst active"><a href="#;" onclick="tab_menu(0);">A점</a></li>
<li><a href="#;" onclick="tab_menu(1);">B점</a></li>
<li><a href="#;" onclick="tab_menu(2);">C점</a></li>
<li><a href="#;" onclick="tab_menu(3);">D점</a></li>
<li><a href="#;" onclick="tab_menu(4);">E점</a></li>
</ul>
</div>
<!--탭메뉴1-->
<div class="menu_tab00 mTs">
<div class="main1">
<img src="../../images/main_08.jpg">
</div>
<!-- 지도 -->
<div style="margin-top:3486px; margin-right:0; margin-bottom:0; margin-left:12px; border-width:0px; width:480px; height:365px; position:absolute; left:50%; top:0%; z-index:11;">
<div id="daumRoughmapContainer1551954977750" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1551954977750",
"key" : "sia4",
"mapWidth" : "556",
"mapHeight" : "202"
}).render();
</script>
</div>
</div>
<!--탭메뉴2-->
<div class="menu_tab01 mTs" style="display:none;">
<div class="main1">
<img src="../../images/main_08.jpg">
</div>
<!-- 지도 -->
<div style="margin-top:3486px; margin-right:0; margin-bottom:0; margin-left:12px; border-width:0px; width:480px; height:365px; position:absolute; left:50%; top:0%; z-index:11;">
<div id="daumRoughmapContainer1552102667973" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1552102667973",
"key" : "six3",
"mapWidth" : "556",
"mapHeight" : "202"
}).render();
</script>
</div>
</div>
<!--탭메뉴3-->
<div class="menu_tab02 mTs" style="display:none;">
<div class="main1">
<img src="../../images/main_08.jpg">
</div>
<!-- 지도 -->
<div style="margin-top:3486px; margin-right:0; margin-bottom:0; margin-left:12px; border-width:0px; width:480px; height:365px; position:absolute; left:50%; top:0%; z-index:11;">
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1552185945764" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1552185945764",
"key" : "sjze",
"mapWidth" : "556",
"mapHeight" : "202"
}).render();
</script>
</div>
</div>
