[jquery] Tab 유형 처리루틴

[jquery] Tab 유형 처리루틴

 

 

<script language="javascript" type="text/javascript"> <!-- jQuery.noConflict(); jQuery(document).ready(function () { jQuery('#img1').click(function () { jQuery('.divTab').css("display", "none"); jQuery('#divTab1').css("display", "block"); jQuery('#img1').attr("src", "/images/img1On.gif"); jQuery('#img2').attr("src", "/images/img2Off.gif"); jQuery('#img3').attr("src", "/images/img3Off.gif"); jQuery('#goUrl').attr("href", "http://naver.com"); return false; }); jQuery('#img2').click(function () { jQuery('.divTab').css("display", "none"); jQuery('#divTab2').css("display", "block"); jQuery('#img1').attr("src", "/images/img1Off.gif"); jQuery('#img2').attr("src", "/images/img2On.gif"); jQuery('#img3').attr("src", "/images/img3Off.gif"); jQuery('#goUrl').attr("href", "http://yahoo.com"); return false; }); jQuery('#img3').click(function () { jQuery('.divTab').css("display", "none"); jQuery('#divTab3').css("display", "block"); jQuery('#img1').attr("src", "/images/img1On.gif"); jQuery('#img2').attr("src", "/images/img2Off.gif"); jQuery('#img3').attr("src", "/images/img3Off.gif"); jQuery('#goUrl').attr("href", "http://daum.net"); return false; }); }); //--> </script> <!-- 탭 타이틀 --> <div class="tabTitle"> <ul> <li class="FLeft"> <img src="images/img1On.gif" id="img1" style="cursor:pointer;" name="img1" border="0"" alt="" /> </li> <li class="FLeft"> <img src="images/img2Off.gif" id="img2" style="cursor:pointer;" name="img2" border="0"" alt="" /> </li> <li> <img src="images/img3Off.gif" id="img3" style="cursor:pointer;" name="img3" border="0"" alt="" /> </li> </ul> </div> <!-- 탭 내용 --> <div class="tabContent"> <div id="divTab1" class="divTab"> <ul> <li class="BizRB1Icon1_Y"><img src="images/No1.gif" alt="" /></li> <li class="BizRB1Text1_Y"><a href="#" class="BizRB1Link1_Y">1번내용</a></li> </ul> <ul> <li class="BizRB1Icon1_Y"><img src="images/No2.gif" alt="" /></li> <li class="BizRB1Text1_Y"><a href="#" class="BizRB1Link1_Y">2번내용</a></li> </ul> </div> <div id="divTab2" class="divTab" style="display:none;"> <ul> <li class="BizRB1Icon1_Y"><img src="images/No1.gif" alt="" /></li> <li class="BizRB1Text1_Y"><a href="#" class="BizRB1Link1_Y">1번내용</a></li> </ul> <ul> <li class="BizRB1Icon1_Y"><img src="images/No2.gif" alt="" /></li> <li class="BizRB1Text1_Y"><a href="#" class="BizRB1Link1_Y">2번내용</a></li> </ul> </div> <div id="divTab3" class="divTab" style="display:none;"> <ul> <li class="BizRB1Icon1_Y"><img src="images/No1.gif" alt="" /></li> <li class="BizRB1Text1_Y"><a href="#" class="BizRB1Link1_Y">1번내용</a></li> </ul> <ul> <li class="BizRB1Icon1_Y"><img src="images/No2.gif" alt="" /></li> <li class="BizRB1Text1_Y"><a href="#" class="BizRB1Link1_Y">2번내용</a></li> </ul> </div> </div>