탭클릭시 이미지 보이게하기

탭클릭시 이미지 보이게하기

QA

탭클릭시 이미지 보이게하기

본문

밑에처럼 탭으로 해서 클릭하면 클릭된 이미지를 보이게 할려고 하는데

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>

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 1,284
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT