이미지 탭

탭 테두리: 선

탭 제목: 이미지

페이지 680px 이라 가정할때.

/* css */

.pay_tab ul { display:block; *zoom:1; }

.pay_tab:after {content:" "; display:block; clear:both;}

.pay_tab li { float:left; width:108px; height:21px; padding-top:9px; text-align:center; background:#302f2f; 

border-left:1px solid #4a4a4a; border-top:1px solid #4a4a4a;  }

.pay_tab .pay_tabline { border-top:none; border-bottom:1px solid #4a4a4a; background:none; }

.pay_tab #pay_t1 { background:#232323; }

 

<script src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

<!--

$(document).ready(function() {

// tab li height

var lisize1 = $(".pay_t").length * 110;

var lisize2 = 680 - lisize1;

$(".pay_tabline").width(lisize2);

$(".pay_tabline").css("padding-bottom","1px");

$(".pay_t").css("cursor","pointer");

$("#pay_t1").css("cursor","default");

$("#pay_t2").css("border-bottom","1px solid #4a4a4a");

$("#pay_t3").css("border-bottom","1px solid #4a4a4a");

// tab li click

$(".pay_t").click(function(event) {

var idx = $(this).attr("id").replace("pay_t", "");

$(".pay_t").css("cursor","pointer");

$(".pay_t").css("background","#302f2f");

$(".pay_t").css("border-bottom","1px solid #4a4a4a");

$("#pay_t"+idx).css("cursor","default");

$("#pay_t"+idx).css("border-bottom","none");

$("#pay_t"+idx).css("background","#232323");

$(".tab_con").hide();

$("#tab_con"+idx).show();

return false;

});

});

//-->

</script>

<ul class="pay_tab">

<li id="pay_t1" class="pay_t"><img src="../images/pay_tab1_on.gif" alt="" /></li>

<li id="pay_t2" class="pay_t"><img src="../images/pay_tab2.gif" alt="" /></li>

<li id="pay_t3" class="pay_t"><img src="../images/pay_tab3.gif" alt="" /></li>

<li class="pay_tabline">&nbsp;</li>

</ul>

<div class="tab_con" id="tab_con1">...</div>

<div class="tab_con" id="tab_con2">...</div>

<div class="tab_con" id="tab_con3">...</div>