탭클릭시 이미지 보이게하기
본문
밑에처럼 탭으로 해서 클릭하면 클릭된 이미지를 보이게 할려고 하는데
1추천사이트를 클릭하면 이미지가 보입니다 하지만 2추천사이트를 클릭하면 이미지가 안보입니다 이유가 왜 그런가요?
<script>
function tab_Change(idx){
$("#tab_content_"+idx).show().siblings().hide();
$("#tab_header_"+ idx).addClass("active").siblings().removeClass("active");
};
</script>
<!-- 탭 레이아웃 -->
<div id = "tab_container">
<div id = "tab_header">
<div id = "tab_header_1" class="tab_header_common active" onclick="tab_Change(1);">
<p class="tab_header_text_common" style="font-size:16px;"><img src="/img/new/tab_china.jpg">1추천사이트</p>
</div>
<div id = "tab_header_2" class="tab_header_common" onclick="tab_Change(2);">
<p class="tab_header_text_common" style="font-size:16px;"><img src="/img/new/tab_us.jpg"> 2추천사이트</p>
</div>
</div>
<div id = "tab_content">
<div id = "tab_content_1" class="tab_content_common">
<ul id="mid_banner">
<li><img src="./img/new/16.jpg" style=" margin-bottom:5px; " border=0/></li>
<li><img src="./img/new/ao.jpg" style=" margin-bottom:5px; " border=0/></li>
<li><img src="./img/new/jd.jpg" style=" margin-bottom:5px; " border=0/></li>
<li><img src="./img/new/pin.jpg" style=" margin-bottom:5px;" border=0/></li>
<li><img src="./img/new/mt.jpg" style=" float:left;" border=0/></li>
</ul>
</div>
<div id = "tab_content_2" class="tab_content_common">
<ul id="mid_banner2">
<li><img src="./img/new/6pm.jpg" style="margin-bottom:5px;" border=0/></li>
<li><img src="./img/new/car.jpg" style=" margin-bottom:5px;" border=0/></li>
<li><img src="./img/new/bac.jpg" style=" margin-bottom:5px;" border=0/></li>
<li><img src="./img/new/vit.jpg" style=" margin-bottom:5px;" border=0/></li>
<li><img src="./img/new/bes.jpg" style=" margin-bottom:5px;" border=0/></li>
<li><img src="./img/new/vs.jpg" style=" margin-bottom:5px;" border=0/></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('#mid_banner').bxSlider({
speed:1000,
auto:true,
autoHover:true,
controls:false,
pager:false,
moveSlides:2,
maxSlides:2,
minSlides:2,
slideWidth: 200,
slideMargin: 10,
infiniteLoop:false
});
$('#mid_banner2').bxSlider({
speed:1000,
auto:true,
autoHover:true,
controls:false,
pager:false,
moveSlides:2,
maxSlides:2,
minSlides:2,
slideWidth: 200,
slideMargin: 10,
infiniteLoop:false
});
});
</script>
